Javascript Angularjs-http get模板带有ng模型，但结果未定义

我正在尝试构建一个带有动态组件的页面。这是我的索引（左侧部分），由php生成

<div id="userList" ng-controller="userCtr">
    <div class="user" data-ng-init="userID[0] = 1" ng-click="selectUser(1)">Tom</div>
    <div class="user" data-ng-init="userID[1] = 2" ng-click="selectUser(2)">Peter</div>
    <div class="user" data-ng-init="userID[2] = 3" ng-click="selectUser(3)">Zoe</div>
</div>

<div id="mainView"> {{ mainView }} </div>

我试图在userCtr中处理ng模型值，但在使用console.log（）时它返回undefined。

---

如何修复此问题？

我建议使用这种嵌套视图，更喜欢使用ui路由器。您的意思是$scope.mainView未定义吗？@digit我是指插入模板中的变量。高度、大小、年龄。能否将断点放在代码中返回未定义的位置？@digit这些变量在$scope中不存在，html文本文件中的这些变量是否无法访问$scope？

<div id="userProfile" ng-init="currentUser = 'Peter'"></div>
<div class="row" ng-model="height">180</div>
<div class="row" ng-model="size">M</div>
<div class="row" ng-model="age">18</div>

userApp.controller("userCtr",  function ($scope) {

    $scope.currentUser = false;
    $scope.height= false;
    $scope.size= false;
    $scope.age= false;
    $scope.selectedUserID = false; 

    $scope.$watch('selectedUserID ', function(){
        var userID = $scope.selectedUserID ;

        if(userID !== false){
            $.get("/userAPI/" + userID).then(function(html){
                 $scope.mainView = html; 

                 /* These return undefined */
                 console.log($scope.height);
                 console.log($scope.size);
                 console.log($scope.age);
                 /* These return undefined */

            });
        ); 
    });     
    $scope.selectUser = function(userID){
        $scope.selectedUserID = userID;
    }

    $scope.$watch('userID', function () {
        if(!$scope.selectedUserID )
            $scope.selectUser ($scope.userID[0]);
    });                
})