AngularJS with html5 color input - set value dynamically

Question

I have an input with type color defined in my controller scope:

HTML:

<div ng-controller="MyCtrl">
    <input type="color" value="#f0f0f0" />
    <input type="color" value={{getColor()}} />
</div>

JS:

function MyCtrl($scope) {
    $scope.getColor = function () {
        return "#f0f0f0";
    };
}

The problem is the color don't get updated when its set by Angular, although when inspecting I see this:

See: FIDDLE.

How to update html5 input color dynamically?

Answer 1

You don`t even need a $watch, just a $timeout.

function MyCtrl($scope, $timeout) { 
    $timeout(() => {
        $scope.mycolor = "#f0f0f0";
    }) 
}

working fiddle http://jsfiddle.net/3ukL3suf/

Answer 2

Try to bind it to your controller with ng-model instead of value.

function MyCtrl($scope) {  
    $scope.mycolor = "#f0f0f0";

    $scope.$watch('mycolor', function(newVal) {
        console.log('newVal ' + newVal);
    });
}

Here is updated and working fiddle.