AngularJS ng-controller not working after bootstraping

Question

When I add ng-controller to any div, the {{ }} are rendered as such.

<div id="1">
<div class="ExplorerApp">  
    <div>
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
    </div>
    <div class="NavigationPane" ng-controller="ExplorerController">
        <div>Pane data: {{myData.test}}</div>
    </div>
</div>
</div>

The first div works fine but the second one doesn't. Following is my js code:

        var app = angular.module('Explorer', []);
        angular.bootstrap(document.getElementById("1"), ["Explorer"]);

        app.controller("ExplorerController", function ($scope) {
            $scope.myData = {};
            $scope.myData.test = "Hello Angular";
        });

What element should return this: document.getElementById(self._compID) ? — user1817574
– user1817574, Commented May 21, 2015 at 10:28
@TeoMor I can't use ng-app due to complexity of my web app -lazy loading etc. — adnan kamili
– adnan kamili, Commented May 21, 2015 at 10:39

dfsq · Accepted Answer · 2015-05-21 10:39:10Z

3

You have two problems.

The first one is the id selector supplied for getElementById is incorrect, it should be without # character (and better to avoid numeric ids, although it would also work). Or if you use #1 you can go with document.querySelector('#1').

The second problem is that you need to bootstrap the app after module and all services and controllers are created. In your case you were doing create app -> bootstrap -> create controller, while it should be create app -> create controller -> bootstrap.

Correct code:

var app = angular.module('Explorer', []);
app.controller("ExplorerController", function ($scope) {
    $scope.myData = {};
    $scope.myData.test = "Hello Angular";
});

angular.bootstrap(document.getElementById("1"), ["Explorer"]);

Demo: http://plnkr.co/edit/eTvbTkUeFkDj0Bkye0qc?p=preview

answered May 21, 2015 at 10:39

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adnan kamili Over a year ago

Thanks a ton! bootstrapping at the end fixed the issue

Hard Worker Over a year ago

Tnx that solution help me as well

jbigman · Accepted Answer · 2015-05-21 12:21:18Z

Use ng-app="Explorer".

index.html

<div ng-app = "Explorer">
  <div class="ExplorerApp">  
    <div>
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
    </div>
    <div class="NavigationPane" ng-controller="ExplorerController">
        <div>Pane data: {{myData.test}}</div>
    </div>
</div>
</div>

Javascript file:

var app = angular.module('Explorer', []);
        angular.bootstrap(document.getElementById(self._compID), ["Explorer"]);

        app.controller("ExplorerController", function ($scope) {
            $scope.myData = {};
            $scope.myData.test = "Hello Angular";
        });

Look my code in jsfiddle. http://jsfiddle.net/parthipans/5DMjt/1453/

Collectives™ on Stack Overflow

AngularJS ng-controller not working after bootstraping

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related