I am using MVC+Angular. In MVC, I created partial views for search, listing, etc. I show them using:

    @Html.Partial("_Search")
        
    @Html.Partial("_Featured")
        
    @Html.Partial("_Listing")

Previously each partial view had an `ng-app` and `ng-controller`.

Now I combined them all into one ng-app. I added ng-app to master page, and I just used the ng-controller in every partial view.

     <div ng-controller="Search" class="slide">
    some ng-repeat goes here
    </div>

Angular code:

    angular.module("ProductListing", [])
    .controller("Search", function ($scope,$templateCache, $http) {
        $(document).on("keyup", ".txtTempleSearch", function () {
            var searchTerm=$(this).val();
            $.get(configUrl + "SearchGrouped/" + searchTerm, function (data) {
                $scope.Results = JSON.parse(data)[0].result;
                    $scope.$apply();
            });
        });
    })
    .controller('featured', function ($scope) {
        $.get(configUrl + 'Featured', function (data) {
            $scope.featuredTemples = data;
            $scope.$apply();
        });
    })

Is this approach correct or is it better in terms of maintainability/performance/best practice to have a different ng-app for different partial views and use `angular.bootstrap`?