fix(input): ngList is updated when array model values are changed

fixes angular#1751

When the model referenced the same same array and the array values
where changed, the list wasn't updated.
Now watchCollection is used to detect changes in NgModelController.

Changes in input.js breaked tests:
— select select-multiple should require
— select ngOptions ngRequired should treat an empty array as invalid when `multiple` attribute used

Changes in select.js fixed them again: changes in the collections should trigger the formatters and render again.

BEHAVIOUR CHANGE
There is a change in the behaviour of ngList when typing a list.
When “a , b” is typed is automatically changed to “a, b”.

Author: Gonzalo Ruiz de Villa

src/ng/directive/input.js

@@ -1097,11 +1097,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

@@ -262,21 +262,24 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
       }
 
       function setupAsMultiple(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) {
+          var formatters = ctrl.$formatters,
+              idx = formatters.length,
+              value = newValue;
+
+          ctrl.$modelValue = value;
+          while(idx--) {
+            value = formatters[idx](value);
           }
+          ctrl.$viewValue = value;
+          ctrl.$render();
         });
 
         selectElement.on('change', function() {
@@ -395,6 +398,19 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
         // TODO(vojta): can't we optimize this ?
         scope.$watch(render);
 
+        scope.$watchCollection(attr.ngModel, function selectMultipleWatch(newValue, oldValue) {
+          var formatters = ctrl.$formatters,
+              idx = formatters.length,
+              value = newValue;
+
+          ctrl.$modelValue = value;
+          while(idx--) {
+            value = formatters[idx](value);
+          }
+          ctrl.$viewValue = value;
+          render();
+        });
+
         function render() {
               // Temporary location for the option groups before we render them
           var optionGroups = {'':[]},

test/ng/directive/inputSpec.js

@@ -1181,7 +1181,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']);
     });
 
@@ -1224,6 +1224,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() {