angularjs - 変数を更新しないAngularビューの切り替え

Question

AngularJSビューを切り替えるときに変数を更新するのに問題があり、学習するための簡単なアプリを構築しているだけです。これが私がこれまでに持っているものです：

function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'app/main/main.html',
    controller: 'MainController',
    controllerAs: 'main'
  })

  .state('team', {
    url: '/team',
    templateUrl: 'app/main/team.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
$urlRouterProvider.otherwise('/');
}

これが私のコントローラーの一部です：

function MainController($timeout, webDevTec, toastr, $resource, $scope) {
var vm = this;

var GetTeam = $resource('https://apisite.com/api_endpoint/:teamId', {teamId: '@id'});
vm.teamName = '';
function getTeamInfo(id) {
  var teamObj = GetTeam.get({teamId: id});
    $timeout(function(){
      vm.teamName = teamObj["name"];
    },100)        
};

vm.getTeamInfo = getTeamInfo;
}

次に、main.html で、ng-click で getTeamInfo を呼び出します。

 <ul class="list-group">
<li class="list-group-item" ng-repeat="team in main.teams" ng-click="main.getTeamInfo(team.id)"><a href="#/team">{{ team.name }}</a></li>
 </ul>

そのリンクをクリックすると、team.html に移動します。

<div class="row">
            <div class="col-sm-12">
                <h3>{{ main.teamName }}</h3>
                <ul class="list-group">
                  . . . 
                </ul>
            </div>
        </div>

何らかの理由で " main.teamName" が更新されていません。私もこの$scope.$apply(function(){vm.teamName = teamObj["name"]}アプローチを試してみましたが、うまくいきませんでした。また、期待どおりの結果が得られるかどうかを確認するために、前後console.log(teamObj["name"])に' ' も実行しました。新しいビューが更新されない理由がわかりません。vm.teamName'console.log(vm.teamName)'

あなたの洞察、忍耐、そして時間をありがとう！

更新 1

また、変数 ($scope.teamName) で $scope を使用し、$scope.$apply(function(){$scope.teamName = teamObj["name"]}) を使用してみましたが、うまくいきませんでした。

更新 2

$scope.$apply(); も呼び出してみました。'vm.teamName = teamObj["name"]' の後に運が悪い