javascript - angular $compile 后ng-model 不能双向绑定问题-PHP中文网问答

代码如下：
index.html：


<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body  data-ng-app="MetronicApp" ng-controller="AppController" >
<p id="ttt">
</p>

<script src="https://code.angularjs.org/1.5.7/angular.min.js" type="text/javascript"></script>
<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var MetronicApp = angular.module("MetronicApp", [
    ]);

    MetronicApp.controller('AppController', ['$scope', '$rootScope', '$timeout', '$location', '$compile' , '$http', function ($scope, $rootScope, $timeout, $location,$compile,$http) {
        var As = $("#ttt");
        var viewHtml = "<p class='ng-include-content-padding' ng-controller='comTestListController as vm' " +
                ">123<ng-include src='\"http://127.0.0.1:9887/app/views/test/comtest.html\"'></ng-include></p>";
        As.html(viewHtml);

        $compile(As.contents())($scope.$new());

    }]);

    MetronicApp.controller('comTestListController', ['$scope',function ($scope) {
        $scope.data = {};
        $scope.cxremark = "first";
        $scope.testC = function(){
            console.log($scope.cxremark);
            console.log($scope.data.cxremark);
        }
    }]);

</script>


</body>
</html>

comtest.html

<input class="form-control" ng-model="cxremark"/>
<input class="form-control" ng-model="data.cxremark"/>
<button ng-click="testC()">sdfsdf</button>

问题是我改变两个输入框的值：

输出控制台

只有第一个有变化，第二个没有变化啊？为什嚒会出现这种问题呢？