AngularJS ng-контроллер не работает после bootstraping

Question

Когда я добавляю ng-контроллер в любой div, {{ }} отображаются как таковые.

<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> 

Первый div работает отлично, но второй нет. Ниже мой JS код:

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

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

Answer 1

У вас есть две проблемы.

Неверный идентификатор селектора для getElementById, он должен быть без знака # (и лучше избегать числовых идентификаторов, хотя он также будет работать). Или, если вы используете #1, вы можете пойти с document.querySelector('#1').

Вторая проблема заключается в том, что вам необходимо загрузить приложение после и создать все службы и контроллеры. В вашем случае вы делали create app -> bootstrap -> create controller, а это должно быть create app -> create controller -> bootstrap.

Правильный код:

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

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

Демо:http://plnkr.co/edit/eTvbTkUeFkDj0Bkye0qc?p=preview

Answer 2

Использование 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 Файл:

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

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

Смотрите мой код в jsfiddle. http://jsfiddle.net/parthipans/5DMjt/1453/