title: Angular routing/path change and scope issues
body: <p>I am new to AngularJS and I'm facing these issues :</p>
  
  <ol>
  <li><p>I want to have a list of items (movies) and when I click on the image or on the title I want the path to be like #/movie/id. For that I tried using ngRoute and also tried path but I have faced errors in both, can you guide me which one is suitable for my case and how can I use it?</p></li>
  <li><p>As you can see in the HTML code, I am trying to draw a search box but right now when the API runs and returns data the whole content of the ng-app is being replaced with the movie list, should I create a new scope for just the content I want to change, if so how and where?</p></li>
  </ol>
  
  <p>Here is my code:</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>var movies = angular.module("movies", []);
  
  movies.controller('movieController', function ($scope, $http) {
  
      $http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
          params: {
              limit : 16,
              country : 'us',
              apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
              callback: 'JSON_CALLBACK'
          }
      })
      .success(function (data) {
          $scope.movies = data.movies;
      });
  
  });
  
  
  //added ngroute
  var app = angular.module('movies', ['ngRoute']);
  app.config(
      function($routeProvider) {
          $routeProvider.
              when('/', {templateUrl:'/'}).
              when('/movie/:id', 
                  {   
                      controller:UserView, 
                      templateUrl: function(params){ return '/moviessssssss/' + params.id; }
                  }
              ).
              otherwise({redirectTo:'/'});
      }
  );
  app.controller('UserView', function($scope) {
      $scope.movies = 'hereeeeeee!';
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="movies"&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
  &lt;script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
        &lt;div class="ng-scope"&gt;
              Search : &lt;input type="text" placeholder="filter for..." &gt;
        &lt;/div&gt;
        &lt;div ng-view&gt;
         {{ message }}
            &lt;table ng-controller="movieController" class="ng-cloak"&gt;
                  &lt;tr ng-repeat="movie in movies"&gt;
                      &lt;td&gt;&lt;a ng-href="#movie" &gt;&lt;img ng-src="{{ movie.posters.thumbnail}}"/&gt;&lt;/a&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;a ng-href="#movie"  &gt; {{ movie.title }} &lt;/a&gt;&lt;/td&gt;
                  &lt;/tr&gt;
            &lt;/table&gt;
       &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>