How to bind Array from angular $scope to the input

Question

I have an array in $scope, say

$scope.my_array = ["val_1", "val_2", "val_3"]

To bind this array input element, I used ng-model:

<input type="text" ng-model="my_array">

Now I want it to be display the array values as comma separated in input box, but nothing displays. Is this even possible?

In ng-repeat, it is iterating the values, so the array is available to the view.

EDITED: Thanks, the normal way is working for array binding. But in my case I was first using empty array:

$scope.my_array = []

Then, on ng-click function, I am grabbing the data-* attribute from the clicked element and pushing it to the array:

var item = $(".some-class").data("field-type");
$scope.my_array.push(item)

Iterating over this is working fine, but not working while setting to the input.

Answer 1

Look at another topic where two-way filtering is explained in details: How to do two-way filtering in angular.js? in brief you should use ngModels' $parsers and $formatters collection to be able make .join(", ") before setting to input and to make .split(/, */) before setting value back to the model.

Answer 2

This problem has been solved, I used

$scope.my_array = $scope.my_array.concat(item)

Instead of using .push() method.

I don't know if the push method of the array is a problem, but after concating the value into array, worked for me, now the array values are visible in input field.