title: AngularJS, Second Controller not Working
body: <p>I just started using AngularJS. I added a view/controller and route and its all working fine. But as soon as I start adding another route with a different controller things are not working. Following is my code,</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app='simpleApp'&gt;
  &lt;body&gt;
  
      &lt;div data-ng-view=""&gt;&lt;/div&gt;
  
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var sampleModule = angular.module('simpleApp', []);
          var controllers = {};
  
          controllers.SimpleController = function($scope){            
          $scope.books = [    {title: "The book thief", author:"Unknown"}, 
                              {title:"Da Vinci Code", author:"Dan Brown"}, 
                              {title:"Gamperaliya", author:"Martin Wickremasinghe"}
                         ];       
          $scope.addTitle = function()
          {
              $scope.books.push({title:$scope.newTitle, author:$scope.newAuthor}  );
          }
  
          $scope.removeTitle = function()
          {
              $scope.books.pop({title:$scope.newTitle, author:$scope.newAuthor}   );
          }           
      }
  
      controllers.detailController = function ($scope)
      {
          $scope.abc = 'sdsdsd';
          $scope.titleDetail = $location.search.title;
          alert('dfdfd');
      }
  
      sampleModule.controller(controllers);
  
      sampleModule.config(function($routeProvider) {
          $routeProvider
              .when('/',
                  {
                      controller: 'SimpleController',
                      templateUrl: 'third1.html'
                  })
              .when('/detail/title/:titleId',
                  {
                      controller: 'detailController',
                      templateUrl: 'third2.html'
                  })
              .otherwise( {redirectTo: '/'    });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>The third1.html successfully get loaded and it has a link to load third2.html which I expects to provide more details about the book. But in third2.html I cannot get values initiated in detailController or from URL. it doesn't evaluate {{ }} directives.</p>
  
  <p>Any help?</p>
  
  <p>Ish</p>