$watchCollection informs the old collection array values in the second argument of the listener. fixes #1751

src/ng/directive/input.js

@@ -385,7 +385,9 @@ var inputType = {
 
 
 function isEmpty(value) {
-  return isUndefined(value) || value === '' || value === null || value !== value;
+  return isUndefined(value) || value === '' || value === null ||
+    (value.length === 0 && isArrayLike(value)) ||
+    value !== value;
 }
 
 
@@ -1082,11 +1084,11 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
   // model -> value
   var ctrl = this;
 
-  $scope.$watch(function ngModelWatch() {
+  $scope.$watchCollection($attr.ngModel, function ngModelWatch(newValue, oldValue) {
     var value = ngModelGet($scope);
 
     // if scope model value and ngModel value are out of sync
-    if (ctrl.$modelValue !== value) {
+    if (!equals(ctrl.$modelValue, oldValue)) {
 
       var formatters = ctrl.$formatters,
           idx = formatters.length;

src/ng/directive/select.js

@@ -266,21 +266,17 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
       }
 
       function Multiple(scope, selectElement, ctrl) {
-        var lastView;
         ctrl.$render = function() {
           var items = new HashMap(ctrl.$viewValue);
           forEach(selectElement.find('option'), function(option) {
             option.selected = isDefined(items.get(option.value));
           });
         };
 
-        // we have to do it on each watch since ngModel watches reference, but
-        // we need to work of an array, so we need to see if anything was inserted/removed
-        scope.$watch(function selectMultipleWatch() {
-          if (!equals(lastView, ctrl.$viewValue)) {
-            lastView = copy(ctrl.$viewValue);
-            ctrl.$render();
-          }
+        scope.$watchCollection(attr.ngModel, function selectMultipleWatch(newValue, oldValue) {
+          ctrl.$viewValue = newValue;
+          requiredValidator && requiredValidator(newValue);
+          ctrl.$render();
         });
 
         selectElement.on('change', function() {

src/ng/rootScope.js

@@ -362,6 +362,7 @@ function $RootScopeProvider(){
       $watchCollection: function(obj, listener) {
         var self = this;
         var oldValue;
+        var oldArray;
         var newValue;
         var changeDetected = 0;
         var objGetter = $parse(obj);
@@ -371,6 +372,7 @@ function $RootScopeProvider(){
 
         function $watchCollectionWatch() {
           newValue = objGetter(self);
+          oldArray = null;
           var newLength, key;
 
           if (!isObject(newValue)) {
@@ -386,6 +388,8 @@ function $RootScopeProvider(){
               changeDetected++;
             }
 
+            oldArray = oldValue.slice(0);
+
             newLength = newValue.length;
 
             if (oldLength !== newLength) {
@@ -439,7 +443,7 @@ function $RootScopeProvider(){
         }
 
         function $watchCollectionAction() {
-          listener(newValue, oldValue, self);
+          listener(newValue, oldArray || oldValue, self);
         }
 
         return this.$watch($watchCollectionWatch, $watchCollectionAction);

test/ng/directive/inputSpec.js

@@ -986,7 +986,7 @@ describe('input', function() {
       expect(scope.list).toEqual(['a']);
 
       changeInputValueTo('a , b');
-      expect(inputElm.val()).toEqual('a , b');
+      expect(inputElm.val()).toEqual('a, b');
       expect(scope.list).toEqual(['a', 'b']);
     });
 
@@ -1019,6 +1019,28 @@ describe('input', function() {
       changeInputValueTo('a,b: c');
       expect(scope.list).toEqual(['a', 'b', 'c']);
     });
+
+    it("should detect changes in the values of an array", function () {
+      var list = ['x', 'y', 'z'];
+      compileInput('<input type="text" ng-model="list" ng-list />');
+      scope.$apply(function() {
+        scope.list = list;
+      });
+      expect(inputElm.val()).toBe('x, y, z');
+      scope.$apply(function() {
+        list.unshift('w');
+      });
+      expect(inputElm.val()).toBe('w, x, y, z');
+    });
+
+    it('should be invalid if empty', function() {
+      compileInput('<input name="namesInput" ng-model="list" ng-list required/>');
+      changeInputValueTo('a');
+      expect(inputElm).toBeValid();
+      changeInputValueTo('');
+      expect(inputElm).toBeInvalid();
+    });
+
   });
 
   describe('required', function() {

test/ng/rootScopeSpec.js

@@ -510,6 +510,28 @@ describe('Scope', function() {
           $rootScope.$digest();
           expect(arrayLikelog).toEqual(['x', 'y']);
         });
+
+        it('should return a new array with old values', function(){
+          var watchArgs;
+          $rootScope.$watchCollection('obj', function (newValues, oldValues) {
+            watchArgs = {
+              newValues: newValues,
+              oldValues: oldValues
+            };
+          });
+
+          $rootScope.obj = ['a'];
+          $rootScope.$digest();
+
+          expect(watchArgs.newValues).toEqual($rootScope.obj);
+          expect(watchArgs.oldValues).toEqual([]);
+
+          $rootScope.obj.push('b');
+          $rootScope.$digest();
+
+          expect(watchArgs.newValues).toEqual(['a', 'b']);
+          expect(watchArgs.oldValues).toEqual(['a']);
+        })
       });