Select option values returns null when using binding html from JSON in Angular.js

Im binding an HTML form stored as JSON into a view template dynamically using a custom directive.

This HTML consists of a select tag and options that are generated dynamically using ng-repeat and who's model are set using ng-model.

The problem is that the bound data from the select tags, comes back as null

Here is the entire Model-View-Controller setup:

JSON with HTML:

{"location":"<input class='form-control' type='text' placeholder='City' ng-model='model.location.city'/><select class='form-control' ng-model='model.location.state'><option value=''>State</option><option ng-repeat='(k, val) in states' value='{{k}}'>{{val}}</option></select>"}

..resolves to this:

<input class='form-control' type='text' placeholder='City' ng-model='model.location.city'/>

<select class='form-control' ng-model='model.location.state'>
    <option value=''>State</option>
    <option ng-repeat='(k, val) in states' value='{{k}}'>{{val}}</option>
</select>

View Template:

<div bind-html-compile="html_from_json">
<!-- to be filled with HTML from JSON file -->
</div>
<button ng-click="getdata()">get form data</button>

Directive doing the binding:

.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
    restrict: 'AE',
    link: function (scope, element, attrs) {
      scope.$watch(function () {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function (value) {
        element.html(value && value.toString());
        var compileScope = scope;
        if (attrs.bindHtmlScope) {
          compileScope = scope.$eval(attrs.bindHtmlScope);
        }
        $compile(element.contents())(compileScope);
      });
    }
    };
}]);

The Controller & Model

.controller('testCtrl', function($scope, $http, $state, $sce){

    $scope.model = {

        location : {
             city:'', // this works fine!
            state:'' // this comes back as null
        }
    };

    $http.get('html_form.json').then(function(res){

         $scope.html_from_json = $sce.trustAsHtml(res.data['location']);

         $scope.getdata = function(){ 

             console.log($scope.model);

         };

    });
});

This is the output to the log when "new york" is entered into the "city" field and a given state is chosen:

If I put the HTML form directly into the view (not pull it from JSON) everything works correctly. It seems that getting the data from the JSON string is what is causing this issue.

Even more strangely, the following:

console.log($scope.model.location);

does return the selected state, but expanding the object in the dev console, or trying to use the data resolves to null.

Does anyone know what may be causing this and how it can be resolved??

--UPDATE--

I found that I can get around this issue by setting the ng-models for the JSON html to non-object values. For example:

<select ng-model="state"></select> <!-- this works -->

vs.

<select ng-model="location.state"></select> <!-- this returns null -->

Then I just feed the values back to the model in my controller:

$scope.model.location.state = $scope.state; 

But this is kinda crude. I would still like to know what the issue is.