<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

  <body ng-controller="mycontroller">
    <div ng-repeat="directive in directives">
       <dynamic-creation items="items" change="toggleChange"></dynamic-creation>
      </div>
      <button ng-click="addProduct(item)">add new product</button><br />
      {{selectedItems}}
  </body>

</html>
// Code goes here
var app = angular.module('myApp', []);

app.directive('dynamicCreation', function() {
  var fields={};
  fields.restrict=  'E';
  fields.replace = true;
  fields.templateUrl= 'dynamicFields.html';
  fields.scope = {
    items : '=items',
    toggleChange : '=change'
  }
  return fields;
  
});


app.controller('mycontroller', function($scope) {

  $scope.directives = [{}];
  $scope.selectedItems = [];
  $scope.items = [{'id':1,'name':'apple', 'price': 100},
  {'id':2,'name':'orange', 'price':75},
  {'id':3,'name':'lemon', 'price':50}]

  $scope.toggleChange = function (item) {
    var itemIndex = $scope.selectedItems.indexOf(item);
    if(itemIndex != -1) {
    $scope.selectedItems.splice($scope.selectedItems.indexOf(item), 1);
    }
    $scope.selectedItems.push(item);
  };

  $scope.addProduct = function (item){
      $scope.directives.push({});
  }
});
/* Styles go here */

 <div class="item-text-wrap">
        <label class="item item-input item-select">
          <span class="input-label">Product</span>
          <select  ng-model="item" ng-options="item as item.name for item in items" ng-change="toggleChange(item)" class="col col-100"><option style="display:none" value="">select an item</option></select>
        </label>
        <label class="item item-input">
          <span class="input-label">Price</span>
           <input type="number" ng-model="item.price" placeholder="Select an item" ng-disabled="!item" />
        </label>
</div>