Angularjs data binding issue / javascript being weird

This is undoubtedly a stupid problem where I'm just doing something simple wrong.

I have a page with several directives, loading their templates and controllers. All of which is working fine except for this one.

Using the controller as model, this. is the same as $scope.. So in my controller I have:

var self = this;
this.states = { showControls: false, showVideo: false }

this.showVideo = function() { self.states.showVideo = true; }
this.showControls = function() { self.states.showControls = true; }

$scope.$on(Constants.EVENT.START_WEBCAM, self.showVideo)
$scope.$on(Constants.EVENT.VIDEO_SUCCESS, self.showControls)

In the view I have a button to reveal this part of the view and subsequently request access to your webcam. Clicking the button broadcasts an event with $rootScope.$broadcast from the parent controller.

When the user grants access to the webcam (handled in the directive's link function) it broadcasts another event the same way.

Both methods are triggered by listening with $scope.$on, and both methods fire as they should. However, the showVideo method successfully updates its associated state property, and the showControls method does not. What am I doing wrong?

Using the debug tool it looks like states.showControls is being set to true, but this change isn't reflected in the view, and adding a watcher to the states object doesn't detect any change at this point either. It does when I set showVideo.

via Chebli Mohamed