Angular ng-show doesnt work from the controller

Question

I am trying to display a div after a video finishes. The alert shows up after the video finish but the div is still not visible.What am I doing wrong. Thank you for the help in advance.

@section scripts
{
    <script type="text/javascript" src="~/App/Controllers/TestController.js"></script>
}
<div ng-controller="TestController as ctrl" class="md-content" ng-cloak>
    <h1>Test</h1>

    <video id="myVideo"  controls autoplay>
        <source src="~/Videos/Test1.mp4">
    </video>

    <div id="test" ng-show="ui.showTest">
        <h1>Test</h1>
        Added this as a test to see if your controller is linked to the view
        <p>{{ui.shouldSeeThis}}</p>
    </div>
</div>

This is the controller

angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('TestController', function ($scope, $http, $filter, $mdDialog) {


var vid;

function initializePlayer() {

    vid = document.getElementById("myVideo");
    vid.addEventListener('ended', videoFinish, false);
}

window.onload = initializePlayer;

$scope.ui = {
    showTest: false,
    //I've added this to see if your controller is linked to the view
    shouldSeeThis: "Hello World"
};
function videoFinish() {
    $scope.ui.showTest = true;
    alert("VideoFinish");
}

});

there isn't enough information here to know for sure what the problem is, but you are *probably* victim of the "always use a dot in angular bindings" rule. you have bound a primitive in the `ng-show`, and it is very easy for this primitive to be inaccessible due to prototype inheritance. You should always bind object properties, not primitives. see http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs — Claies, Oct 19 '16 at 15:19
you do check what is the value of showTest after the video. $scope is not unique... you can have a problem with another $scope, for that you can write {{showTest}} or install a extencion how ng-inspector. a easy fix is use a object — chefjuanpi, Oct 19 '16 at 15:26
this might be a case were you need to trigger a digest cycle with either $timeout or $scope.apply. Not the best solution but yet some times is needed — Sarantis Tofas, Oct 19 '16 at 16:37
you defined "TestController as ctrl" but used ng-show="ui.showTest". Try to use ctrl.showTest on ng-show — Joao Polo, Oct 19 '16 at 16:50

score 1 · Answer 1 · edited Oct 29 '16 at 07:49

As stated in the comments, it's best practice to bind to an object property. Try the following:

<div id="test" ng-show="ui.showTest">
    <h1>Test</h1>
    <!-- Added this as a test to see if your controller is linked to the view-->
    <p>{{ui.shouldSeeThis}}</p>
</div>

$scope.ui = {
    showTest: false,
    //I've added this to see if your controller is linked to the view
    shouldSeeThis: "Hello World"
};
function videoFinish()
{
    $scope.ui.showTest = true;
    alert("VideoFinish");
}

As the comments state, I've added an extra property to the object, if you paste the code above you should see "Hello World" inside the <p> element. I placed this in the answer as your question does not provide all of the relevant code.

Thank you. I modified my code according to your suggestions but I still don't see my div — , Oct 19 '16 at 16:19

score 1 · Accepted Answer · answered Oct 19 '16 at 16:33

It looks like that you need to force digest in order to reflect scope changes in the view. This happens because you are changing the scope value using a javascript event.

In your controller add $timeout:

.controller('TestController', function ($scope, $http, $filter, $mdDialog, $timeout)

In your function wrap the code with it:

function videoFinish() {
    $timeout(function() {
      $scope.ui.showTest = true;
      alert("VideoFinish");
    });
}

Angular ng-show doesnt work from the controller

2 Answers2