javascript - How to build navigation menu by webservice response content? -

my goal retrieve both navigation menu bar , content show backend rest webservice.

how can achieve it? have following code, not work far:

testpage.html:

<div ng-controller="testcontroller>     <li ng-repeat="nav in navs">         <a href="{{nav.link}}">{{nav.name}}</a>     </li> </div> <!-- content... --> <script src="js/main.js"></script> <script src="js/navigationservice.js"></script> <script src="js/testcontroller.js"></script> 

main.js:

app.config(function($routeprovider, $locationprovider) {     $routeprovider.when("/test", {         templateurl : "templates/testpage.html",         controller : "testcontroller"     }).otherwise({         templateurl : "templates/error.html"     }); }); 

navigationservice.js:

angular.module("test").service('navigationservice', function(data) {     this.initnavigation = function(data) { //assume json object fields passed         //process data , apply modifications, set scope variable init menu         $scope.navs = data;      } }); 

testcontroller.js:

angular.module("test").conroller('testcontroller', ['$scope', '$http', 'navigationservice', function($scope, $http) {     $http.get(url)         .success(function(data) {             navigationservice.initnavigation(data.navs); //creates navigation json             //process content     }); }]); 

questions:

• how initialize navigationservice? lateron want use service in multiple controllers. should place service inside main.js, or should leave inside single file?
• how can trigger menu generation in testpage.html when json retrieved , initialized navigationservice?