title: AngularJS with two controllers in one app in an onclick event
body: <p>I'm doing a simple angular example but can't quite figure out why it is not working. I seem to have found where it fails, but not why.</p>
  
  <p>This does work (direcly calling the Test2 function):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Init();
  Test1();
  Test2(); //**DIRECTLY CALL THIS METHOD**
          
  function Init() {
    window.app = angular.module('MyApp', []);
  }
          
  function Test1() {
    app.controller('MySelectCtrl', function ($scope) {
    alert(1);
    });
  }
          
  function Test2() {
    app.controller('MySelectCtrl2', function ($scope) {
    alert(2);
  });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-ng-app="MyApp" &gt;
    &lt;p&gt;
    &lt;select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model"&gt;
      &lt;option data-ng-repeat="option in MyNames" value="{{$index}}"&gt;{{MyNames}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;/p&gt;
      
    &lt;p&gt;
    &lt;select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" &gt;
      &lt;option data-ng-repeat="option in MyNames2" value="{{$index}}"&gt;{{MyNames2}}&lt;/option&gt;&lt;/option&gt;
    &lt;/select&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>While this doesn't work (calling the Test2 function in the onclick):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Init();
  Test1();
  //Test2(); **CALLING THIS THROUGH ONCLICK IN THE FIRST SELECT BELOW**
      
  function Init() {
    window.app = angular.module('MyApp', []);
  }
      
  function Test1() {
    app.controller('MySelectCtrl', function ($scope) {
      alert(1);
    });
  }
      
  function Test2() {
    app.controller('MySelectCtrl2', function ($scope) {
      alert(2);
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-ng-app="MyApp" &gt;
    &lt;p&gt;
    &lt;select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model" onclick="Test2();"&gt;
      &lt;option data-ng-repeat="option in MyNames" value="{{$index}}"&gt;{{MyNames}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;/p&gt;
      
    &lt;p&gt;
    &lt;select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" &gt;
      &lt;option data-ng-repeat="option in MyNames2" value="{{$index}}"&gt;{{MyNames2}}&lt;/option&gt;&lt;/option&gt;
    &lt;/select&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I only run Test2() in the onclick (ie get to execute alert(2) when the first select is clicked)?</p>
  
  <p>Note: The above is just a minified test. In reality I want the second select to be populated ($http ajax call) with items depending on what was selected in the first select. Should I be using a different approach to bind that data? </p>