AngularJs scrollTo issue

I am making a menu with AngularJs and I want that, clicking on the item, the page will scroll to the section of the clicked item. My code is the following:

script.js

var app = angular.module('allApps',['ui.bootstrap']);
app.controller("menuCtrl",function($scope, $location, $anchorScroll){
    $scope.menuItems=[
                      {page:"Biography", id:"bio"},
                      {page:"Curriculum Vitae", id:"cv"},
                      {page:"Gallery", id:"gallery"},
                      {page:"Video", id:"video"},
                      {page:"Press", id:"press"},
                      {page:"News", id:"news"},
                      {page:"Contact", id:"contact"}
                      ];

    $scope.scrollTo = function(id) {
        $location.hash(id);
        console.log($location.hash());
        $anchorScroll();
    };
});

menu.html

<ul class="nav nav-pills" id="mainMenu" ng-controller="menuCtrl">
    <li class="active"><a href="#/">Home</a></li>
    <li ng-repeat="item in menuItems"><a ng-click="scrollTo('{{item.id}}')" href="">{{item.page}}</a>
</ul>

the code like this doesn't work but, if I write explicitly

ng-click="scrollTo('bio')"

it does (obviously it will scroll all the links to biography page). I thought it was a problem in reading AngularJs directions but if I check it with firebug I can see it takes the correct id's.

May you tell me what is wrong?