Angularjs ns-style change via Controller

Question

I am trying to change background color of div. Mine html code is below:

<div ng-style="{'background-color': backgroundImageInfo}">
    <input type="file" onchange="angular.element(this).scope().fileThatChangeBackground(this)" />
</div>

Mine js code inside controller:

$scope.backgroundImageInfo='red';
$scope.fileThatChangeBackground = function() {
    alert($scope.backgroundImageInfo);
    $scope.backgroundImageInfo='blue';
};

First line of controller change background color to red. When i am set file to input alert show 'red' and did not change background color to blue. When i change file of input(fire function) alert show 'blue' and again did not change background color. Why ng-style dont change color when i change value from function?

Answer 1

Since you're calling the fileThatChangeBackground function from outside Angular, you will need to do $scope.$apply if you want this to work. Like this:

angular.module('testApp',[])
.controller('testCtrllr', function($scope){
    $scope.backgroundImageInfo='red';    
    $scope.fileThatChangeBackground = function(scope) {                    
        $scope.$apply(function(){
            $scope.backgroundImageInfo='blue';
        });
    };
});

Working example