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?

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?

• javascript
• html
• angularjs

Share Improve this question Follow asked Nov 12, 2014 at 9:11 OfirisOfiris 6,15166 gold badges3737 silver badges5959 bronze badges 1

• I don't know whether the JSFiddle has been updated, but the color was changing for me. Just had a slight delay. – Stacker-flow Commented Nov 12, 2014 at 9:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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

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

working fiddle http://jsfiddle/3ukL3suf/