Angular JS $scope query

Question

I'm trying to do the following:

Type something in a search box, perform the related search and show the result defined in a separate view template.

The search thingy is part of a page header and so, my index page is as follows:

index.html

<div class="row search-box">

    <div class="col-md-2"></div>
    <div class="col-md-6">

        <form id="myForm" class="form-inline form-search"
            style="padding-left: 10px">
<!-- Search box -->
            <input id="in" type="text" ng-model="searchTerm" placeholder="Search for products, categories or brands"
                class="search-query input-search">

            <button class="btn searchBtn" ng-click="doSearch()" ng-controller="MediaListController">
                <i class="icon-search"></i>Search
            </button>

        </form>
    </div>
    <div class="col-md-3">
     
     <div class="btn btn-blue cart-btn-cont">
        <span class="cart-icon"></span>
     </div>
    </div>
</div>

...

<div ng-view></div>

Controller (relevant function)

$scope.doSearch = function () {
    
    var type = $scope.mediaType;
    $scope.foundItems = MediaService.search().length;
    console.log("Found items :"+ $scope.foundItems + "for search term :"+ $scope.searchTerm);
    $location.path("/search");
}

app.js

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: '/'});
}]);

Search result template:

Found {{ foundItems }} product(s) for search phrase <i>"{{searchTerm}}"</i>

It all works fine, but in getting to this stage, I am confused by the following:

a. Why is $scope.foundItems not visible in the template i.e, {{foundItems}} works only when I use $scope.$parent.foundItems in the controller?

b. If a new child scope is being created, how come $scope.searchTerm is available in the view template i.e., {{searchTerm}}? Is it because ng-model="searchTerm" creates a model binding in the rootScope?

c. I also saw that {{foundItems}} in the template worked fine if I used $rootScope.foundItems, but what if I want to avoid $rootScope - is the use of $scope.$parent valid?

Thanks in advance.

Answer 1

a. Why is $scope.foundItems not visible in the template i.e, {{foundItems}} works only when I use $scope.$parent.foundItems in the controller? I think it's a little strange to assign the same controller in the ng-view and then another tag like button. Because button will create its own scope right there. And then ng-view also creates one.

b. If a new child scope is being created, how come $scope.searchTerm is available in the view template i.e., {{searchTerm}}? Is it because ng-model="searchTerm" creates a model binding in the rootScope? that scope has nothing to do with the doSearch scope actually.

c. I also saw that {{foundItems}} in the template worked fine if I used $rootScope.foundItems, but what if I want to avoid $rootScope - is the use of $scope.$parent valid? You should probably have a main controller for the page and then call everything from there perhaps.