why is this controller instantiated only once?

Question

I have the following (also in Plunker):

<!doctype html>
<html 
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  </head>
  <body ng-app="theApp">
    <div ng-conroller="ExampleCtrl as ctl">
      <input type="text" ng-model="ctl.value"/><br>
      {{ctl.value}}
    </div>
    <div ng-controller="ExampleCtrl as ctl">
      <input type="text" ng-model="ctl.value"/><br>
      {{ctl.value}}
    </div>
    <script>
     angular.module('theApp', [])
            .controller('ExampleCtrl', [
              function () {
                var self = this;
                self.value = 'Lorem ipsum';
                console.log('controller instantiated');
              }
            ]);
    </script>
  </body>
</html>

Looking at the console, I see only one message controller instantiated and only the second inbox has the bound value printed below it:

I was expecting two separate controllers to be instantiated and indeed after filling-in values it appears that there's two independent scopes, however I cannot explain the initial state.

score 4 · Accepted Answer · answered Oct 10 '15 at 15:24

4

Typo in first ng-controller directive declaration.

<div ng-conroller="ExampleCtrl as ctl">

should be

<div ng-controller="ExampleCtrl as ctl">

Working Plunkr

answered Oct 10 '15 at 15:24

Pankaj Parkar

134,766
23
234
299

Upvoted but I'm gonna delete the question. It adds nothing to the community. – Marcus Junius Brutus Oct 10 '15 at 15:40
@MarcusJuniusBrutus It may assist the person who might have made spelling mistake like you :) and its common sort of spelling mistake as angular directive doesn't have intellisense on IDE.. – Pankaj Parkar Oct 10 '15 at 15:41
yet it is weird that after the initial loading, one can type values in the first field or second field and see two different values being printed. Any thoughts on that? – Marcus Junius Brutus Oct 10 '15 at 15:43
@MarcusJuniusBrutus because both were using different controller initialization of different DOM.. you are creating two instances of same `controller` which `context` is sharing on different `DOM`s – Pankaj Parkar Oct 10 '15 at 15:45

score 1 · Answer 2 · answered Oct 10 '15 at 15:27

1

thats because of typo:

The first controller is spelled as: conroller instead of controller

answered Oct 10 '15 at 15:27

Nishanth Matha

5,993
2
19
28

why is this controller instantiated only once?

2 Answers2