Select2 event handling with Angular js

Question

I'm having an issue getting my select2 on-change event to fire using Angular js.

Here is my html:

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" ng-change="DoSomething()" class="input-max" ng-model="l.DepartmentID">
    <option value=""></option>
    <option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> </select>

When the select dropdown changes, the change event doesn't fire. Here's my event handler in my controller:

$scope.DoSomething = function () {
        alert('here');
        ...
}

What's the best way to handle this? I've been told to set a watch on the model value. Will that work, or is there a better way?

Answer 1

Alternative by watching ng-model:

In view:

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" class="input-max" ng-model="l.DepartmentID">
<option value=""></option>
<option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option>
</select>

In controller:

$scope.$watch('l.DepartmentID', function (newVal, oldVal) {
    if (oldVal == newVal) return;
    alert('here');
}, true);