Angular and Asp.Net Mvc error

Question

In Aps.net Mvc views called _LoginPartial.cshtml I've added Angular Controller:

    <div class="navbar-right" data-ng-app="PublicApp" data-ng-controller="PublicNotificationsCtrl">
  </div>

And that Login partial is rendered on my default layout using:

@Html.Partial("_LoginPartial")

And below it I have

 @RenderBody()

Which renders body which allays has it's Angular controller.

So in html all this looks like:

            <div class="navbar-right ng-scope" data-ng-controller="PublicNotificationsCtrl" data-ng-app="PublicApp">
                <ul class="nav navbar-nav">
                    <li class="dropdown user-profile-dropdown notifications-dropdown"></li>
                </ul>
                <ul class="nav navbar-nav">
                    <li class="dropdown user-profile-dropdown"></li>
                </ul>
            </div>
        </div>
        <!--

        /.nav-collapse 

        -->
    </div>
<div class="">
    <div  data-ng-controller="PublicRoutinesCtrl" data-ng-app="PublicApp">
        <div class="container" data-ng-show="isMainScreen"></div>
        <div class="container special-container" data-ng-hide="isMainScreen"></div>
    </div>
</div>

But my other controllers don't work anymore as if angular is not loaded (for example I see {{test.Value}} instead of real value)

In console I don't get any errors. Why is this happening ?

EDIT

I've put blank div in my main layout page like this:

<div data-ng-app="PublicApp" data-ng-controller="PublicNotificationsCtrl">

                </div>

But with same result

Answer 1

Based on your comment that you instantiate your ng-app with each div, that sounds to be the problem. You can only have one ng-app per page, which is typically the body or html element in the page.

From the angular docs:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp