Unable to Set Angular Model from Javascript

Question

I tried to set an angularjs model value from a Javascript code but it doesn't work. I always get an empty value for that property. Below is a snippet of my html code:

  <script type="text/javascript">

    VSS.init({
        explicitNotifyLoaded: true,
        usePlatformScripts: true,
        usePlatformStyles: true
    });

    VSS.ready(function () {            

        console.log("Organization name " + VSS.getWebContext().account.name);
        var scope = angular.element(document.querySelector('#hubContainer')).scope();
        scope.$apply(function () {
            scope.DashboardModel.AccountKey = VSS.getWebContext().account.name;
        })
    });

   </script>

  <div class="ng-cloak tree-master-wrapper">
    <div id="hubContainer" class="ng-scope" data-ng-controller="MyController">
       Some code comes here…….
   </div>

But for some reasons the console.log(“AccountKey “ + $scope.DashboardModel.AccountKey) is empty. Any idea? I using https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js

Answer 1

I was able to resolve this by adding this entry to "MyController":

MyModule.controller('MyController', ['$scope', function($scope){

    $scope.DashboardModel = new DashboardModel(); 

    var checkPermission = function (selectedTeam) {
    VSS.require(["VSS/Service", "VSS/Security/RestClient"], 
    function(VSS_Service, Security_RestClient) {   
       $scope.DashboardModel.AccountKey = VSS.getWebContext().account.name;
    });
   });
  }