title: Difference between on-change and ng-change
body: <p>Below is a pretty straightforward setup for a form drop down list. However, the <code>on-change</code> event refuses to fire... unless it's changed to <code>ng-change</code>. </p>
  
  <p>This had me stuck for about an hour, since we use the same setup elsewhere in our site (i.e. model property/list/<code>on-change</code> directive) without fail. </p>
  
  <p>I'm wondering what the difference is between <code>on-change</code> and <code>ng-change</code> and why one works in this instance and the other doesn't? </p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;select id="grArchive"
          name="grArchive"
          class="form-control"
          options="userList"
          ng-model="selectedUser"
          ng-options="user as user.name for user in userList"
          on-change="showSelected()"&gt;
  &lt;/select&gt; 
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>scope.selectedUser = {};
  scope.userList = [];
  
  scope.showSelected = function(){
      scope.columns = addColumns;
  };
  
  var loadUserList = function(data){
      scope.userList = $.map(data, function(item){
              return {id: item.id, name: item.firstName + ' ' + item.lastName};
          });
  }
  </code></pre>
  
  <p>Just in case: the user drop down populates as expected (screen shot below)</p>
  
  <p><a href="https://i.stack.imgur.com/jK9Cc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jK9Cc.png" alt="enter image description here"></a></p>