title: How to set property of selected ng-options item with ng-model
body: <p>I'm trying to set a property of the selected item in an ng-options set in a html select by pointing ng-model to it, essentially, I want to define an array like</p>
  
  <p>data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}]</p>
  
  <p>And have two select's showing the options 'meow' and 'woof'. If the 1st select is set to 'woof', the data should then look like</p>
  
  <p>[{option : "meow", answer : "woof"}, {option : "woof", answer : ""}]</p>
  
  <p>The idea being you'd display</p>
  
  <p>A cat goes [meow/woof] a dog goes [meow/woof].</p>
  
  <p>I've tried</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but no dice... there seems to be a scoping problem with item (or perhaps a value/reference) problem, but I'm not sure :/</p>
  
  <p>I've created a Plunker <a href="http://plnkr.co/edit/qPpW3x0SAHxTiX7SzPEM" rel="nofollow">http://plnkr.co/edit/qPpW3x0SAHxTiX7SzPEM</a> to demonstrate.</p>
  
  <p>Full repro</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  app.directive('gap', function () {
    return {
        transclude: true,      
        template: '&lt;select type="name" ng-model="item.answer" ng-options="item.answer as item.option for item in data" required&gt;&lt;/select&gt;',
          link: function ($scope, $element, $attr) {
              // some code
          }
      }
  });
  
  app.directive('ngHtmlCompile', function($compile)
  {
      return {
          restrict: 'A',      
          link: function(scope, element, attrs)
          {
              scope.$watch(attrs.ngHtmlCompile, function(newValue, oldValue)
              {
                  element.html(newValue);
  
                  $compile(element.contents())(scope);
              });
          }
      }
  });
  
  app.controller('TestController', function($scope) 
  {
    $scope.html = "A cat goes &lt;gap&gt;&lt;/gap&gt; a dog goes &lt;gap/&gt;";
    $scope.data = [{option : "meow", answer : ""}, {option : "woof", answer : ""}]
  });
  
      //var UsersService = $resource('/auth/users', {});
     </code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.3.11" data-semver="1.3.11" src="https://code.angularjs.org/1.3.11/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
  &lt;div ng-app="myApp" ng-controller="TestController"&gt;
    &lt;div ng-html-compile="html"&gt;&lt;/div&gt;
    &lt;br&gt;
    &lt;br&gt;
    Current output&lt;br&gt;
    {{data}}&lt;br&gt;
    Desired output&lt;br&gt;
    [{"option":"meow","answer":"meow"},{"option":"woof","answer":"woof"}]&lt;br&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Cheers,
  Matt</p>