Question: The app has a controller, that uses a service to create an instance of video player. The video player triggers events to show progress every few seconds. When the video reaches to a certain point, I want to show a widget on top of the video player.

The view has the widget wrapped in ng-show directive.

It takes more then 60 seconds for the dom element to receive the signal to remove the ng-hide class after the event has been triggered and the values have been populated.

If I try to implement this using the plain dom menthod (like document.getElementById(eleId).innerHTML = newHTML), the update is instant.

What am I doing wrong? Here is the complete sequence in code:

Controller:

```
MyApp.controller('SectionController', ['$scope', 'PlayerService'], function($scope, PlayerService){
$scope.createPlayer = function() {
    PlayerService.createPlayer($scope, wrapperId);
}});

```

Service:

```
MyApp.service('PlayerService', [], function(){

this.createPlayer=function(controllerScope, playerWrapper){

    PLAYER_SCRIPT.create(playerWrapper) {

        wrapper : playerWrapper,
        otherParam : value,
        onCreate : function(player) {

            player.subscribe(PLAY_TIME_CHANGE, function(duration){
                showWidget(controllerScope, duration);
            })

        }
    }

}

function showWidget(controllerScope, duration) {
    if(duration>CERTAIN_TIME) {
        $rootScope.widgetData = {some:data}
        $rootScope.showWidget = true;
    }

}});

```

View:

```
<div ng-show="showWidget">  <div class="wdgt">{{widgetData.stuff}}</div>  </div>

```

Answer: 
Solved it! $scope.$apply() did the trick.

My guess is, due to other complex logic ad bindings inside the app, there was a delay in computing the change by angular the default way.

@floribon Thanks for the subtle hint about "complex angular stuff".

The code inside the service function changed to:

```
function showWidget(controllerScope, duration) {
if(duration>CERTAIN_TIME) {
    $rootScope.widgetData = {some:data}
    $rootScope.showWidget = true;
    $rootScope.$apply();
}}

```
Do you have complex angular stuff within your hidden view?

You should try to use `ng-if` instead of `ng-show`, the difference being that when the condition is false, `ng-if` will remove the element from the DOM instead of just hidding it (which is also what you do in vanilla JS).

When the view is simply hidden using `ng-show` however, all the watchers and bindings within it keep being computed by Angular. Let us know if `ng-if` solve your problem, otherwise I'll edit my answer.