Angular ui-grid :dropdown with multiple select - angularjs

Question

I am trying to use multiple select in anguler-ui-grid but get error:
TypeError: value.forEach is not a function
at writeNgOptionsMultiple [as writeValue] (angular.js:26579)
at ngModelCtrl.$render (angular.js:28680)
at Object.ngModelWatch (angular.js:25493)
at Scope.$digest (angular.js:15888)
at angular.js:16091
at completeOutstandingRequest (angular.js:5552)
at angular.js:5829(anonymous function) # angular.js:12520(anonymous function) # angular.js:9292Scope.$digest #
angular.js:15914(anonymous function) #
angular.js:16091completeOutstandingRequest # angular.js:5552(anonymous
function) # angular.js:5829
Here is the code: The only change from the official template is the "multiple" attribute in the dropdown template tpl
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', function ($scope) {
var myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"employed": false
}
];
var dropDownArray = [
{ id: 'Gabi', firstName: 'Gabi' },
{ id: 'Gabriel', firstName: 'Gabriel' }];
$scope.msg = "hello shit";
var tpl = '<div>\
<form\
name="inputForm">\
<select multiple\
ng-class="\'colt\' + col.uid"\
ui-grid-edit-dropdown\
ng-model="MODEL_COL_FIELD"\
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">\
</select>\
</form>\
</div>';
$scope.gridOptions = { data: myData,
columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 190,
editableCellTemplate: tpl,
editDropdownValueLabel: 'firstName',
editDropdownOptionsArray: dropDownArray },
{ field: 'lastName', displayName: 'Last Name', width: 180 },
{ field: 'employed', displayName: 'employed?', width: 180 }]}
}]);

Answer 1

I ran into the same problem - a tough one because it works with angular 1.2 but not with 1.4.
The solution for me was that the initial field value has to be an array, not a string.
So your data must look like this:
var myData = [
{
"firstName": ["Cox"],
"lastName": "Carney",
"employed": true
},
{
"firstName": ["Lorraine"],
"lastName": "Wise",
"employed": false
},
{
"firstName": ["Nancy"],
"lastName": "Waters",
"employed": false
}
];
And the error should go away.