Angular JS - Reloading Javascript

I am starting an angular js application and I ran into a snag. I have a html page that has a few divs with icons in them, on mouse over, I want the background to change color. This is working fine using jquerys $(document).ready(function(){ approach

THis page changes content based on an id in the url (e.g. page/apps/1 - 1 for appid) However, the jquery for setting the background colors using onmouse over events is only called when the page is loaded the first time. If I click a link to update a new application, the jquery does not take effect even though the method is definitely called If i navigate directly in the browser to the page in question, the jquery works as expected, its only when I click links on my page to load up pages without doing a browser refresh that the jquery does not work

Any help on this is greatly appreciated

Code is as follows Page which is loaded

    <div class="row" style="border:0px solid red;">
    <div class="col-md-1 createSection-spacer-left-width"></div>
    <div class="col-md-11">
        <ul class="nav nav-boxed nav-justified nav-box-text createSection-content-width">
            <li><a href="javascript:;" id="rssAndUrlsLi"><i id="rssAndUrls" class="genericNavBox rssAndUrls"></i> Rss & Urls</a></li>
            <li><a href="javascript:;" id="articleURLLi"><i id="articleURL" class="genericNavBox articleURL"></i> Article URL</a></li>
            <li><a href="javascript:;" id="googleAlertsLi"><i id="googleAlerts" class="genericNavBox googleAlerts"></i> Google Alert</a></li>
            <li><a href="javascript:;" id="writeLi"><i id="write" class="genericNavBox write"></i> Write </a></li>
            <li><a href="javascript:;" id="twitterLi"><i id="twitter" class="genericNavBox twitter"></i> Twitter</a></li>
            <li><a href="javascript:;" id="facebookLi"><i id="facebook" class="genericNavBox facebook"></i> Facebook</a></li>
            <li><a href="javascript:;" id="googlePlusLi"><i id="googlePlus" class="genericNavBox googlePlus"></i> Google +</a></li>
            <li><a href="javascript:;" id="youtubeLi"><i id="youtube" class="genericNavBox youtube"></i> YouTube</a></li>
        </ul>

    </div>

</div>

Javascript file is then loaded at the bottom of this page

<script src="scripts/customMobileAppScripts/createSection.js"></script>

Portion of Code in requested Javascript file

          $(document).ready(function() {
        return setSourceBoxValues();
      });

function setSourceBoxValues() {
$("#rssAndUrlsLi").mouseover((function() {
      return $("#rssAndUrls").addClass("rssAndUrlsActive");
    }));
    $("#rssAndUrlsLi").mouseover((function() {
      return $("#rssAndUrlsLi").css("background-color", "red");
    }));
}

Cheers Damien