angular select - option values with JSON object
<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>