How to add an array of objects to ng-model from a directive?

Question

JavaScript

There is a form for filling out a product card. I need to enter the name of the product and an array of possible colors for this product in the form of objects
{ id : '1232','name':'Green','type':'colors'}
Everything is clear with the name of the product. But there is a problem with flowers. Colors are sent to the form as a directive
, which is output using ng-repeat

<div ng-repeat="color in colors" >
            <add-product data="color.name" id="color.id" type="color" model="colors"></add-product>
         </div>

The directive inside looks like this

template: '<button  ng-click="deleteFromBasket(id,data,type)">{{data}}</button>',

Here's the question - where can I put ng-model so that in the form of a product card I can get

{ name: 'BMW', colors : [{'id':'12312','name':'blue','type':'colors'},{id:'12432','name':'white','type':'colors'},{id:'123232','name':'green','type':'colors'}]

A working example - so that there is an understanding of what I want. Thanks

Answer 1

plnkr.co/edit/mcRMhwwky9NSOyny7MkN?p=preview

Answer 2

ngModel is not needed here. But if you want - read the documentation about ngModelController, everything you need is there. In general, if you do not find fault with the fact that $scope is used, Alexander Aksentiev correctly tells you.