title: Angular JS routing not working
body: <p>While i am trying to click on <strong>show</strong> its not showing any thing, i have wasted lot of time on this, but no luck can some one help.</p>
  
  <p>Files....</p>
  
  <ol>
  <li>app.js</li>
  <li>controller.js</li>
  <li>index.html</li>
  <li>show.html</li>
  </ol>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app='Java4sApp'&gt;
  &lt;head&gt;
      &lt;title&gt;Angular Js Tutorials _ Java4s&lt;/title&gt;
      &lt;script type="text/javascript" src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="controllers.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-controller='Java4sController'&gt;
  
  
  
              Settings :
              &lt;a href="#add"&gt;Add Details&lt;/a&gt; | &lt;a href="#show"&gt;Show Details&lt;/a&gt; 
  
              &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>show.html</strong></p>
  
  <pre><code>&lt;html ng-app='Java4sApp'&gt;
  &lt;head&gt;
      &lt;title&gt;Angular Js Tutorials _ Java4s&lt;/title&gt;
      &lt;script type="text/javascript" src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="controllers.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-controller='Java4sController'&gt;
  
  
              &lt;input type="text" ng-model="myModel" /&gt;
  
              &lt;ul&gt;
                  &lt;li ng-repeat='person in people | filter:myModel'&gt;{{person.name}}&lt;/li&gt;
              &lt;/ul&gt;
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>app.config(['$routeProvider', function($routeProvider) {
  
      $routeProvider.
        when('/add', {
          controller: 'Java4sController',
          templateUrl: '/add.html'
      }).
        when('/show', {
          controller: 'Java4sController',
          templateUrl: '/show.html'
      }).
        otherwise({
          redirectTo: '/index.html'
        });
  }]);
  
  app.controller("Java4sController",function($scope){
  
          $scope.people = [
              {name: 'Siva', city: 'Cary'},
              {name: 'Teja', city: 'Raleigh'},
              {name: 'Reddy', city: 'Durham'},
              {name: 'Venky', city: 'Denver'},
              {name: 'Arun', city: 'Texas'}
      ];
  
  });
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module("Java4sApp",[]);
  </code></pre>
  
  <p>Thank you.</p>