AngularJS and $document.height();?

Question

OK I'm trying to set a canvas height using $document.height() which works well as long as the content inside of it isn't angularJS generated as in a ng-repeat or any directive... I've created a plunker to illustrate my point basically the canvas should have the same height as the document AFTER the ng-repeat renders...

angular.module('ngAppDemo', [])
.controller('ngAppDemoController', function ($scope, $window, $document) {
    $scope.canvas = angular.element('#spiro')[0];
    $scope.ctx = $scope.canvas.getContext("2d");
    $scope.canvas.height = $document.height();


    $scope.friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
  ];

});

Chris

Answer 1

Things that are render dependent should be handled by a directive and not a controller. The controller should assign variables to the $scope, but the directive handles changes in the DOM directly.

To get changes to happen after AngularJS has finish digesting you can use $timeout. It's kind of like setTimeout in JavaScript except that it's executed after Angular finishes the current digest cycle. That means np-repeat will be executed, and then $timeout will be execute.

https://docs.angularjs.org/api/ng/service/$timeout

So you might do something like this (not tested)

$timeout(function(){
    $scope.canvas = angular.element('#spiro')[0];
    $scope.ctx = $scope.canvas.getContext("2d");
    $scope.canvas.height = $document.height();
});