angualrjs html经过$compile后，ng-model失效？

Question

angualrjs html经过$compile后，ng-model失效？

发布于
2016-12-06

代码如下：

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

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

<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 =`
            <input class="form-control" ng-model="cxremark"/>
            <input class="form-control" ng-model="data.cxremark"/>
            <button ng-click="testC()">ok</button>
        `;
        As.html(viewHtml);
        $compile(As.contents())($scope);

        $scope.data = {};
        $scope.cxremark = "";
        $scope.testC = function(){
            console.log($scope.cxremark);
            console.log($scope.data.cxremark);
        }

    }]);
</script>


</body>
</html>

问题是我改变两个输入框的值：
图片描述
输出控制台

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