Angularjs ui router Scroll To state change with templatecache

I have the same situation as the following two posts: Angular ui-router, scroll to next step on state change and Angular ui-router change state on scroll

TL;DR I have multiple sections on one page where I want the user to scroll to when clicking on a link. I get the scroll to function to work but it seems to scroll to random positions, except on the first click. I also use templatecache (html2js) for my views.

I have the following routing:

$urlRouterProvider.otherwise("/");

var views = {
    "viewAbout": {templateUrl: "app/views/about/about.tpl.html"},
    "viewMeetups": {templateUrl: "app/views/meetup/meetup.tpl.html"},
    "viewNextMeetup": {templateUrl: "app/views/meetup/next-meetup.tpl.html"},
    "viewSponsors": {templateUrl: "app/views/sponsors/sponsors.tpl.html"},
    "viewContactUs": {templateUrl: "app/views/contact-us/contact-us.tpl.html"},
    "viewFooter": {templateUrl: "app/views/footer/footer.tpl.html"}
};

$stateProvider
    .state('home', {
        url: "/",
        views: views
    })

    .state('about', {
        url: "/about",
        views: views,
        onEnter: function () {
            $('#scrollme').animate({
                scrollTop: $("#about").offset().top
            }, 2000);
        }
    })

    .state('meetups', {
        url: "/meetups",
        views: views,
        onEnter: function () {
            $('#scrollme').animate({
                scrollTop: $("#meetups").offset().top
            }, 2000);
        }
    })

And the following menu:

<ul class="nav navbar-nav navbar-right">
            <li class="hidden">
                <a href="#page-top"></a>
            </li>
            <li class="page-scroll">
                <a ui-sref="about">About</a>
            </li>
            <li class="page-scroll">
                <a ui-sref="meetups">Meetups</a>
            </li>
            <li class="page-scroll">
                <a ui-sref="sponsors">Sponsors</a>
            </li>
            <li class="page-scroll">
                <a ui-sref="contact">Contact us</a>
            </li>
        </ul>

<div ui-view="viewNextMeetup"></div>

<div ui-view="viewAbout"></div>

<div ui-view="viewMeetups"></div>

<div ui-view="viewSponsors"></div>

<div ui-view="viewContactUs"></div>

<div ui-view="viewFooter"></div>

Anyone could help me out with this ?