title: Creating a controller to manage site navigation angularjs
body: <p>I'm trying to use <code>ng-repeat</code> to easily manage navigation on my site. Here's my code for the navigation:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="Navigation as AppNav"&gt;
  
    &lt;ul class="nav navbar-nav"&gt;
         &lt;li ng-repeat="appLinks in AppNav.appLinks"&gt;&lt;a href={{AppNav.appLinks.Page}}&gt;{{AppNav.appLinks.Page}}&lt;/a&gt;&lt;/li&gt; 
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my code for the Navigation.js controller:</p>
  
  <pre><code>'use strict';
  
  (function(){
  var app = angular.module('AppNav', [ ]);
  app.controller('Navigation', function(){
      this.appLinks = gems;
  
      });
  var gems = [
      {
          Page: 'Home Page',
          Link: '"#"'
      },
      {
          Page: 'About',
          Link: '"#/about"'
      },
      {
          Page: 'Contact',
          Link: '"#:'
      }
  ];
  })();
  </code></pre>
  
  <p>I keep getting this error:</p>
  
  <blockquote>
    <p>GET <a href="http://localhost:9000/scripts/controllers/navigation.js" rel="nofollow">http://localhost:9000/scripts/controllers/navigation.js</a> 
    angular.js:11607 Error: [ng:areq] Argument 'Navigation' is not a
    function, got undefined
    <a href="http://errors.angularjs.org/1.3.14/ng/areq?p0=Navigation&amp;p1=not%20a%20function%2C%20got%20undefined" rel="nofollow">http://errors.angularjs.org/1.3.14/ng/areq?p0=Navigation&amp;p1=not%20a%20function%2C%20got%20undefined</a>
        at REGEX_STRING_REGEXP (angular.js:63)
        at assertArg (angular.js:1580)
        at assertArgFn (angular.js:1590)
        at angular.js:8431
        at angular.js:7599
        at forEach (angular.js:331)
        at nodeLinkFn (angular.js:7586)
        at compositeLinkFn (angular.js:7078)
        at compositeLinkFn (angular.js:7081)
        at compositeLinkFn (angular.js:7081)</p>
  </blockquote>
  
  <p>I'm using angular version v1.3.14. As a heads up, I'm very new to angular.js and application building so please if you can help, please let me know what I'm doing wrong along with a code sample.</p>
  
  <p>Thank you all so much for your help in advance!</p>
  
  <p>contents of app.js:</p>
  
  <pre><code>'use strict';
  
  /**
   * @ngdoc overview
   * @name testappApp
   * @description
   * # testappApp
   *
   * Main module of the application.
   */
  angular
    .module('testappApp', [
      'ngAnimate',
      'ngAria',
      'ngCookies',
      'ngMessages',
      'ngResource',
      'ngRoute',
      'ngSanitize',
      'ngTouch'
    ])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
        })
        .when('/about', {
          templateUrl: 'views/about.html',
          controller: 'AboutCtrl'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p>Main.js:</p>
  
  <pre><code>'use strict';
  
  describe('Controller: MainCtrl', function () {
  
    // load the controller's module
    beforeEach(module('testappApp'));
  
    var MainCtrl,
      scope;
  
    // Initialize the controller and a mock scope
    beforeEach(inject(function ($controller, $rootScope) {
      scope = $rootScope.$new();
      MainCtrl = $controller('MainCtrl', {
        $scope: scope
      });
    }));
  
    it('should attach a list of awesomeThings to the scope', function () {
      expect(scope.awesomeThings.length).toBe(3);
    });
  });
  </code></pre>