title: Angular-Fullstack + UI router isn't routing properly
body: <p>I'm attempting to route my application using UIrouter with the current yeoman-fullstack generator without mongoDB. In this example of my issue, everything is default to test and make sure the UI-router is working properly. </p>
  
  <p>Mainly because I'm not understanding and missing something silly and noobish here, so I apologize.</p>
  
  <p><a href="https://github.com/DaftMonk/generator-angular-fullstack" rel="nofollow">https://github.com/DaftMonk/generator-angular-fullstack</a></p>
  
  <p>I'm attempting to edit my routes in client/app/app.js using </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  angular.module('sr388App', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router',
    'ui.bootstrap'
  ])
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
      $urlRouterProvider
        .otherwise('/');
  
      $stateProvider
  
        .state('about', {
          url: '/about',
          template: '&lt;h1&gt;Attempting to have this point at /main/about.html but this is for testing purposes&lt;/h1&gt;'
        });
  
      $locationProvider.html5Mode(true);
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now, testing that, localhost:9000/about will load, but when I try to link the state to the navbar it breaks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  angular.module('sr388App')
    .controller('NavbarCtrl', function ($scope, $location) {
      $scope.menu = [{
        'title': 'Home',
        'link': '/',
        'title': 'About',
        'link': '/about'
      }];
  
      $scope.isCollapsed = true;
  
      $scope.isActive = function(route) {
        return route === $location.path();
      };
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The console error is 
  Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode</p>
  
  <p>Here is the navbar html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a href="/" class="navbar-brand"&gt;sr388&lt;/a&gt;
      &lt;/div&gt;
      &lt;div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}"&gt;
              &lt;a ng-href="{{item.link}}"&gt;{{item.title}}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm certain my fundamental understanding of what's happening (supposed to be happening) is flawed. </p>
  
  <p>I did notice the # is not being added when attempting to load states without changing URL. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;a ng-href="{{item.link}}"&gt;{{item.title}}&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought I had found the problem, and this would fix it</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;a ui-sref="{{item.link}}"&gt;{{item.title}}&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But no dice.</p>
  
  <p>Any advice/suggestions would be greatly appreciated. All I'm really trying to do is to create a simple SPA page based on this</p>
  
  <p><a href="http://i.imgur.com/sZYe15o.png" rel="nofollow">http://i.imgur.com/sZYe15o.png</a></p>
  
  <p>That would just simply run through a few different view states. </p>
  
  <p>/#about
  /#contact etc. </p>