Unable to bind my selected value from colorpicker

Question

I am runing angularJS typescript application. I am trying to fetch color from colorpicker as of now i am getting the value from color picker but i am unable to bind that color as a background to my div.My ts file is as follows

class UserDefinedElementTypeController {

    public mycolor: string = "#f0f0f0";

    constructor(private $scope: ng.IScope) {

        this.watchForcolorChanges();
    }

    private watchForcolorChanges() {

        this.mycolor = "#0f0f0f";
        this.$scope.$watch(() => this.mycolor, function (newVal, oldval) {
            console.log(oldval, newVal);
            this.divStyle = {
                'background-color': newVal
            }
        });
    }
}

mainAngularModule.controller("userdefinedelementtype", UserDefinedElementTypeController);

HTML Code

 <input type="color" ng-model="UDETController.mycolor" />
 <div ng-style="UDETController.divStyle">Testing for background color </div>

Am i missing something?

Answer 1

I have resolved that problem. in watchForcolorChanges function i have changed my code to

  private watchForcolorChanges() {

         this.$scope.$watch(() => this.mycolor,
             (newVal, oldval) =>{
                console.log('this.scope', this.$scope);
                this.divStyle = {
                    'background-color': newVal
                }
            });
    }