title: AngularJS routing not working after adding second state
body: <p>I am using the ui.router. First when I just set the home state everything was working fine. But after adding the articles state my routing wouldn't work. I have following angular code:</p>
  
  <pre><code>var app = angular.module('ibrahimsBlog', ['ui.router'])
  
  app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {
  
    $stateProvider
  
      .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'PrimaryController'
      });
  
      .state('articles', {
        url: '/articles/{id}',
        templateUrl: '/articles.html',
        controller: 'ArticlesController'
      });
  
    $urlRouterProvider.otherwise('home');
  }])
  
  app.factory('articlesFactory', [function(){
    var art = { articles: [] };
    return art;
  }])
  
  app.controller('ArticlesController', [
  '$scope',
  '$stateParams',
  'articlesFactory',
  function($scope, $stateParams, articlesFactory){
    $scope.article = articlesFactory.articles[$stateParams.id];
  }]);
  
  app.controller('PrimaryController', [
  // Two Way Data Binding ist nur möglich mit scope Variablen.
  '$scope',
  'articlesFactory',
  function($scope, articlesFactory) {
  
    $scope.articles = articlesFactory.articles;
  
    $scope.articles = [
      { title : 'foo', content : "foo", likes : 5, date : '12/15/2014' },
      { title : 'bar', content : "bar", likes : 2, date : '12/14/2014' },
      { title : 'baz', content : "baz", likes : 4, date : '12/23/2014' }
    ];
  
    $scope.addArticle = function() {
  
      if(!$scope.title || $scope.title === '') { return; }
  
      $scope.articles.push(
        {
          title: $scope.title,
          content: $scope.content,
          likes: 0,
          date: '12/15/2014',
          comments: [
            { author: 'foo', comment: 'bar', upvotes: 0 }
          ]
        }
      );
      $scope.title = '';
      $scope.content = '';
    }
  
    $scope.likeArticle = function(article) {
      article.likes += 1;
    }
  }]);
  </code></pre>
  
  <p>And here is my html file:</p>
  
  <pre><code>&lt;html&gt;
  
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Ibrahims Blog&lt;/title&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;style&gt; .glyphicon-heart { cursor:pointer } &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body ng-app="ibrahimsBlog"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-md-offset-3"&gt;
  
       &lt;ui-view&gt;&lt;/ui-view&gt;
  
       &lt;form ng-submit="addArticle()" style="margin-top:30px;"&gt;
        &lt;h3&gt;Create a new article!&lt;/h3&gt;
  
         &lt;div class=form-group"&gt;
          &lt;input type="text"
           placeholder="title"
           ng-model="title"&gt;
          &lt;/input&gt;
         &lt;/div&gt;
  
         &lt;div class="form-group"&gt;
          &lt;input type="text"
           placeholder="content"
           ng-model="content"&gt;
          &lt;/input&gt;
         &lt;/div&gt;
  
        &lt;button type="submit" class="btn btn-primary"&gt;Hinzufügen&lt;/button&gt;
       &lt;/form&gt;
  
       &lt;script type="text/ng-template" id="/home.html"&gt;
        &lt;div class="page-header"&gt;
         &lt;h1&gt;Ibrahims Blog&lt;/h1&gt;
        &lt;/div&gt;
        &lt;span&gt;
        &lt;a href="#/articles/{{ index }}"&gt;Go&lt;/a&gt;
        &lt;/span&gt;
       &lt;/script&gt;
  
       &lt;script type=text/ng-template" id="/articles.html"&gt;
        &lt;div class="page-header"&gt;
         &lt;h3&gt; {{ article.title }} &lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;div ng-repeat="article in articles"&gt;
         &lt;span class="glyphicon glyphicon-heart"
         ng-click="likeArticle(article)"&gt;&lt;/span&gt;
         {{ article.title }} - "{{ article.content }}" - Likes: {{ article.likes }}, Date: {{ article.date }}
        &lt;/div&gt;
      &lt;/script&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Unfortunately everything I receive is following part of the html</p>
  
  <pre><code>&lt;form ng-submit="addArticle()" style="margin-top:30px;"&gt;
   &lt;h3&gt;Create a new article!&lt;/h3&gt;
  
   &lt;div class=form-group"&gt;
    &lt;input type="text"
    placeholder="title"
    ng-model="title"&gt;
    &lt;/input&gt;
   &lt;/div&gt;
  
   &lt;div class="form-group"&gt;
    &lt;input type="text"
    placeholder="content"
    ng-model="content"&gt;
    &lt;/input&gt;
   &lt;/div&gt;
  
   &lt;button type="submit" class="btn btn-primary"&gt;Hinzufügen&lt;/button&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p><strong>Edit</strong>
  Unfortunately there is still a part which is not working.. When I use the <em>Go</em> button, I see the change of the URL, but it then instant redirects me to the home template. On the server I get a 404 Error. Do you know why this is happening?</p>