How do i make total movies header to not repeat itself from RT API call in AngularJS?
<p>Okay so I have this problem where I have to hide the total amount of movies found in a search with the rotten tomatoes api. Every time I type in a query, I get a repeat of the same header with each different movie that appears. I need to only repeat it at the top. Here is an image of what is happening since I can't do it in JSFiddle.
Here is my HTML code:</p>

<pre><code>&lt;html ng-app="demoApp"&gt;
&lt;head&gt;
    &lt;title&gt;demo&lt;/title&gt;
    &lt;script src="angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="search.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-controller="moviesController"&gt;
    &lt;label for="q"&gt;Search Text&lt;/label&gt;
    &lt;input type="text" id="q" ng-model="data.q" ng-model-options="{debounce: 500}"/&gt;

    &lt;label for="page_limit"&gt;Page Size&lt;/label&gt;
    &lt;input type="text"  id="page_limit" ng-model="data.page_limit" ng-model-options="{debounce: 500}"/&gt;

    &lt;label for="page"&gt;Page Number&lt;/label&gt;
    &lt;input type="text" id="page" ng-model="data.page" ng-model-options="{debounce: 500}"/&gt;

        &lt;div class="movie" ng-repeat="movie in movies"&gt;
              &lt;h1&gt;Total movies: {{totalMovies}}&lt;/h1&gt;     
            &lt;div&gt;               
                &lt;img src="{{movie.posters.thumbnail}}" /&gt;
                &lt;h2&gt;{{movie.title}}&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;p&gt;{{movie.synopsis}}&lt;/p&gt;
                &lt;dl&gt;
                    &lt;dt&gt;Rating&lt;/dt&gt;
                    &lt;dd&gt;{{movie.mpaa_rating}}&lt;/dd&gt;

                    &lt;dt&gt;Year&lt;/dt&gt;
                    &lt;dd&gt;{{movie.year}}&lt;/dd&gt;

                    &lt;dt&gt;Critics Score&lt;/dt&gt;
                    &lt;dd&gt;{{movie.ratings.critics_score}}&lt;/dd&gt;

                    &lt;dt&gt;Audience Score&lt;/dt&gt;
                    &lt;dd&gt;{{movie.ratings.audience_score}}&lt;/dd&gt;

                    &lt;dt&gt;Theater Release Date&lt;/dt&gt;
                    &lt;dd&gt;{{movie.release_dates.theater}}&lt;/dd&gt;

                    &lt;dt&gt;DVD Release Date&lt;/dt&gt;
                    &lt;dd&gt;{{movie.release_dates.dvd}}&lt;/dd&gt;
                &lt;/dl&gt;
            &lt;/div&gt;
        &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is my angularJS code</p>

<pre><code>angular.module('demoApp', [])
  .constant('apiKey', 'removed for security')
  .constant('apiUrl', 'http://api.rottentomatoes.com/api/public/v1.0/movies.json')
  .controller('moviesController', function ($scope, $http, apiUrl, apiKey) {
      $scope.data = {}

      $scope.$watchGroup(['data.q', 'data.page_limit', 'data.page'], function () {
          $http.jsonp(apiUrl, {
              params: {
                  q: $scope.data.q,
                  page_limit: $scope.data.page_limit,
                  page: $scope.data.page,
                  apikey: apiKey,
                  callback: 'JSON_CALLBACK'
              }
          }).then(function (response) {
              $scope.movies = response.data.movies;
        //Call total movies
              $scope.totalMovies = response.data.total;
          });
      });
  });
</code></pre>