title: Angular JS $scope query
body: <p>I'm trying to do the following:</p>
  <p>Type something in a search box, perform the related search and show the result defined in a separate view template.</p>
  <p>The search thingy is part of a page header and so, my index page is as follows:</p>
  <p>index.html</p>
  <pre><code>&lt;div class=&quot;row search-box&quot;&gt;
  
      &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-6&quot;&gt;
  
          &lt;form id=&quot;myForm&quot; class=&quot;form-inline form-search&quot;
              style=&quot;padding-left: 10px&quot;&gt;
  &lt;!-- Search box --&gt;
              &lt;input id=&quot;in&quot; type=&quot;text&quot; ng-model=&quot;searchTerm&quot; placeholder=&quot;Search for products, categories or brands&quot;
                  class=&quot;search-query input-search&quot;&gt;
  
              &lt;button class=&quot;btn searchBtn&quot; ng-click=&quot;doSearch()&quot; ng-controller=&quot;MediaListController&quot;&gt;
                  &lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;Search
              &lt;/button&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
       
       &lt;div class=&quot;btn btn-blue cart-btn-cont&quot;&gt;
          &lt;span class=&quot;cart-icon&quot;&gt;&lt;/span&gt;
       &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  ...
  
  &lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  <p>Controller (relevant function)</p>
  <pre><code>$scope.doSearch = function () {
      
      var type = $scope.mediaType;
      $scope.foundItems = MediaService.search().length;
      console.log(&quot;Found items :&quot;+ $scope.foundItems + &quot;for search term :&quot;+ $scope.searchTerm);
      $location.path(&quot;/search&quot;);
  }
  </code></pre>
  <p>app.js</p>
  <pre><code>var app= angular.module('sampleApp', ['ngRoute','ngResource','mgcrea.ngStrap']);
  app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'app/views/partials/login.html',     controller: 'LoginController'});   
  $routeProvider.when('/search', {templateUrl :  'app/views/partials/tpl/search_result.tpl.html'});
  $routeProvider.when('/', {templateUrl: 'app/views/landing_page.html',   controller: 'MediaListController'});    
  $routeProvider.otherwise({redirectTo: '/'});
  }]);
  </code></pre>
  <p>Search result template:</p>
  <pre><code>Found {{ foundItems }} product(s) for search phrase &lt;i&gt;&quot;{{searchTerm}}&quot;&lt;/i&gt;
  </code></pre>
  <p>It all works fine, but in getting to this stage, I am confused by the following:</p>
  <p>
  a. Why is <b>$scope.foundItems</b>  not visible in the template i.e, {{foundItems}} works only when I use <b>$scope.$parent.foundItems</b> in the controller? </p>
  <p>
  b. If a new child scope is being created, how come <b> $scope.searchTerm </b> is available in the view template i.e., {{searchTerm}}? Is it because ng-model="searchTerm" creates a model binding in the rootScope?
  </p>
  <p>
  c. I also saw that {{foundItems}} in the template worked fine if I used <b>$rootScope.foundItems</b>, but what if I want to avoid $rootScope - is the use of $scope.$parent valid?
  </p>
  <p>Thanks in advance.</p>