title: UI-views: loading the url but not the content
body: <p>Here's my code:
  <strong>controller.js</strong></p>
  
  <pre><code>angular.module('myApp',['ui.router'])
  
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    // route to show all the polls
    .state('polls', {
      url: '/polls',
      templateUrl: 'views/polls.html',
      controller: 'pollsController'
    })
    // show new polls
    .state('new', {
      url: '/polls/add',
      templateUrl: 'views/newPoll.html',
      controller: 'newController'
    });
    $urlRouterProvider.otherwise('/polls');
  })
  
  .controller('pollsController', function($scope,$http) {
    $http.get('/polls').then(function(data, status, headers, config) {
      $scope.result = data;
    }).catch(function(data) {
  
      $scope.result = data;
    });
  })
  .controller('newController',function($scope,$http) {
    $http.get('/polls/add').then(function(data,status,headers,config) {
      $scope.result = data;
    }).catch(function(data) {
      $scope.result = data;
    });
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"&gt; --&gt;
    &lt;link rel="stylesheet" type="text/css" href="views/css/style.css"&gt;
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="controller.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="myApp"&gt;
    &lt;div id="topheader"&gt;
      &lt;h1&gt;myApp&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="topnav" id="topnavigation"&gt;
      &lt;a ui-sref-active="active" ui-sref="new"&gt;Add poll&lt;/a&gt;
      &lt;a ui-sref-active="active" ui-sref="polls"&gt;All polls&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>polls.html</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;h2&gt;View your polls!&lt;/h2&gt;
    &lt;div class="allPolls" ng-repeat="item in result.data.polls"&gt;
      &lt;li&gt; {{item.title}}
      &lt;/li&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>newPoll.html</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;form&gt;
      Title: &lt;br&gt;&lt;input type="text" name="title"&gt;&lt;br&gt;
      Options (add line break between options): &lt;br&gt;
      &lt;textarea type="text" name="options"&gt;
      &lt;/textarea&gt;
      &lt;br&gt;
      &lt;button type="button"&gt;Create new poll&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So now when I press the "Add poll"-button from the polls-page the page loads a page where is only the topnavigation-bar. When I press the "Add poll"-button again, the page loads the form from newPoll.html. 
  The url changes on the first click so everything should be working on the first click? </p>