title: How to set ng-model to parent scope with a dynamic value
body: <p>I am trying to dynamically generate a name for the ng-model on the select tags, and have it accessible in the parent scope like on table two, but obviously have them work independent of each other.   </p>
  
  <p>So my question is how do I set the ng-model to something like "$parent.ot1" data array of objects?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var overtimeapp = angular.module('overtime', []);
  
        overtimeapp.controller('ctrlOvertime', function ($scope, $http) {
          
          $scope.overtimes = [{"otid" : "ot1"}, {"otid" : "ot2"}];
  
          $scope.overtimetypes = ['d', 'n', 'r', 's', 'h'];
        });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div ng-app="overtime" ng-controller="ctrlOvertime"&gt;
     table one
     &lt;table class="table table-bordered"&gt;
       &lt;tbody&gt;
      &lt;tr ng-repeat="o in overtimes"&gt;
     &lt;td&gt;
       &lt;select class="w3-select" ng-model="o.otid" ng-options="x for x in  
                  overtimetypes"&gt;&lt;/select&gt;
     &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
     &lt;/table&gt;
            table two
     &lt;table class="table table-bordered"&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="o in overtimes"&gt;
        &lt;td&gt;
       &lt;select class="w3-select" ng-model="$parent.selected" ng-options="x for x in  
                  overtimetypes"&gt;&lt;/select&gt;
     &lt;/td&gt;
      &lt;/tr&gt;
       &lt;/tbody&gt;
     &lt;/table&gt;
   &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>