title: angular select - option values with JSON object
body: <p>I have a <code>&lt;select&gt;</code> with an <code>ng-model</code>. I want the values of my <code>&lt;option&gt;</code>s to be JSON objects.</p>
  
  <p>When a user selects an option, I want to display individual properties from the selected object.</p>
  
  <p>I have the following <a href="https://plnkr.co/edit/etuQXiS4XXTb1VJblLk2?p=preview" rel="nofollow">plunker</a> showing what I am trying to achieve.</p>
  
  <pre><code>&lt;div ng-controller="myCtrl as vm"&gt;
  
      &lt;div&gt;
          Person: 
          &lt;select ng-model="vm.person"&gt;
              &lt;option value='{"name": "Matt", "age": "21"}'&gt;Matt&lt;/option&gt;
              &lt;option value='{"name": "John", "age": "22"}'&gt;John&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
  
      &lt;br&gt;
      Person: &lt;input type="text" ng-model="vm.person"&gt;
      Name: &lt;input type="text" ng-model="vm.person.name"&gt;
      Age: &lt;input type="text" ng-model="vm.person.age"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue is that <code>vm.person</code> is a string, not an object, so I cannot access properties of it.</p>
  
  <p>I have tried <a href="https://docs.angularjs.org/api/ng/function/angular.fromJson" rel="nofollow">fromJson</a> but that throws an error because it is non assignable (which is sensible).</p>
  
  <pre><code>&lt;input type="text" ng-model="angular.fromJson(vm.person.name)"&gt;
  </code></pre>
  
  <p>I could watch for a change on <code>vm.person</code>, then do an <code>angular.fromJson</code> there, but that doesn't feel right. It feels like there is a better way.</p>
  
  <p>I essentially want to parse the string before it gets to the model, so that by the time it get's to the model, it is a javascript object. This will allow me to access properties of that object.</p>
  
  <p>What is the correct way to handle this in angular?</p>
  
  <p>If there is no "angular" way, what is the common way to handle this in Javascript?</p>
  
  <hr>
  
  <p>EDIT</p>
  
  <p>A <a href="https://plnkr.co/edit/q0YRGBI29wiwrdJJseAc?p=preview" rel="nofollow">forked plunker</a> to show the effects of adding a <code>$scope.$watch</code>.</p>
  
  <pre><code>function myCtrl($scope){
      var vm = this;
  
      $scope.$watch('vm.person', function(){
          vm.person = angular.fromJson(vm.person);
      })
  }
  </code></pre>
  
  <p>This allows the Name and Age inputs to be populated correctly, but it breaks the select (it isn't populated by the selected value anymore because the model is changed).</p>