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




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

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;
.controller('featured', function ($scope) {
    $.get(configUrl + 'Featured', function (data) {
        $scope.featuredTemples = data;

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?


1 Answer 1


I think this is primarily opinion based, but in the AngularJS docs, there is the following:

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

Also, note that is not possible to have nested ng-app, so, merging the group related controllers into one unique module is a good thing.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.