Cannot pass scope object to partial
<p>So im using ngRoute to load different partial html files to my index.html file. The ng-view directive loads the first partial (search.html), and when i click a link in that partial, it loads a second partial (details.html). The link click effectively makes a call (via a controller) to the OMDB API to retrieve a specific movie's details and sets $scope.movieJson = response. When i try to access this in my details.html partial, it doesnt recognise it.</p>

<p>index.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="myApp" ng-controller="AppCtrl"&gt;
&lt;head&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;

 &lt;title&gt;Movie List - Home&lt;/title&gt;
 &lt;/br&gt;
 &lt;/br&gt;
 &lt;div class="container"&gt;
  &lt;img class="" src="http://www.movie-list.com/images/logo.png" display="block" margin="auto" width="25%"&gt;
 &lt;/div&gt;
 &lt;/br&gt;
 &lt;/br&gt;

&lt;/head&gt;
&lt;body&gt;
 &lt;div class='container'&gt;
  &lt;input class="form-control searchBox" ng-show="show" type="text" name="searchBox" ng-model="movies" ng-change="getMovies()" placeholder="Enter your movie search"&gt;
  &lt;/br&gt;

  &lt;a href="#/" ng-click="reloadPage()" ng-hide="hide"&gt;&lt;h3&gt;Search Again&lt;/h3&gt;&lt;/a&gt;
  &lt;div data.ng-view&gt;&lt;/div&gt;
  &lt;ng-view&gt;&lt;/ng-view&gt;
 &lt;/div&gt;

 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
 &lt;script src="controllers/controller.js"&gt;&lt;/script&gt;
 &lt;script src="js/config.js"&gt;&lt;/script&gt;
 &lt;script src="js/app.js"&gt;&lt;/script&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>controller.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var myApp = angular.module('myApp', ['ngRoute']);

myApp.controller('AppCtrl', function($scope, $routeParams, $http) {
 $scope.show = true;
 $scope.hide = true;

 $scope.getMovies = function() {
  console.log("Get movies requested in controller");
  $http.get("http://www.omdbapi.com/?s="+$scope.movies+"&amp;y=&amp;plot=full&amp;r=json").success(function(response) {
   console.log("Get movies requested in controller");
   console.log($scope.movies);
   console.log(response);
   $scope.moviesJson = response;
  });
 };

 $scope.getMovie = function(Title, err) {
  console.log(Title);
  $http.get("http://www.omdbapi.com/?t="+Title+"&amp;y=&amp;plot=full&amp;r=json").success(function(response) {
   console.log("Get single movie requested in controller");
   console.log(response);
   $scope.movieJson = response;
   window.scrollTo(0, 0);
  });
  $scope.show = false;
  $scope.hide = false;
 };

 $scope.reloadPage = function() {
  window.location.reload();
 };
});</code></pre>
</div>
</div>
</p>

<p>config.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>myApp.config(function ($routeProvider) {     
 $routeProvider
 .when('/', {
  templateUrl : 'partials/search.html',
  controller : 'AppCtrl'
 })
 .when('/details', {
  templateUrl : 'partials/details.html',
  controller : 'AppCtrl'
 })
 .otherwise(
 {
  templateUrl : '&lt;div&gt;No Page&lt;/div&gt;'
 });
});</code></pre>
</div>
</div>
</p>

<p>search.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" ng-controller="AppCtrl"&gt;
 &lt;div class="row" vertical-align: middle ng-show="show"&gt;
  &lt;div  class="col-md-10 col-xs-10 col-lg-10"&gt;
   &lt;div data-ng-repeat="movie in moviesJson.Search" class="col-md-4 col-xs-4 col-lg-4"&gt;
    &lt;h4&gt;&lt;a href="#/details" ng-click="getMovie(movie.Title)"&gt;{{movie.Title}}&lt;/a&gt;&lt;/h4&gt;
    &lt;a href="#/details" ng-click="getMovie(movie.Title)" ng-style="{ width : 50px, height : 50px }"&gt;&lt;img class="img-responsive" ng-src="{{ movie.Poster || 'https://www.myuniverse.co.in/ABMUPictureLibrary/NoImage.jpg' }}"&gt;&lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>details.html</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" ng-controller="AppCtrl"&gt;
&lt;div class="col-md-10 col-xs-10 col-lg-10"&gt;
 &lt;table class="table" border="1"&gt;
  &lt;thead&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Title:&lt;/strong&gt; {{movieJson.Title}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Year:&lt;/strong&gt; {{movieJson.Year}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Rated:&lt;/strong&gt; {{movieJson.Rated}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Released:&lt;/strong&gt; {{movieJson.Released}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Runtime:&lt;/strong&gt; {{movieJson.Runtime}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Genre:&lt;/strong&gt; {{movieJson.Genre}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Director:&lt;/strong&gt; {{movieJson.Director}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Writer:&lt;/strong&gt; {{movieJson.Writer}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Actors:&lt;/strong&gt; {{movieJson.Actors}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Plot:&lt;/strong&gt; {{movieJson.Plot}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Language:&lt;/strong&gt; {{movieJson.Language}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Country:&lt;/strong&gt; {{movieJson.Country}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Awards:&lt;/strong&gt; {{movieJson.Awards}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;Metascore:&lt;/strong&gt; {{movieJson.Metascore}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;IMDB Rating:&lt;/strong&gt; {{movieJson.imdbRating}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;IMDB Votes:&lt;/strong&gt; {{movieJson.imdbVotes}}&lt;/h4&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;h4&gt;&lt;strong&gt;IMDB ID:&lt;/strong&gt; {{movieJson.imdbID}}&lt;/h4&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>app.js</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('hashchange', function() {
 console.log("Worked");
});</code></pre>
</div>
</div>
</p>

<p>server.js
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(express.static(__dirname = '\public'));
app.use(bodyParser.json());

app.get('', function (req, res) {
 console.log(req.body);
 res.json();
});

app.post('', function(req, res) {
 console.log(req.body);
 res.json(doc);
});

app.listen(3001);
console.log("Server running on port 3001");</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/nbVGm.png" rel="nofollow">End result</a></p>