How to update ng-model based on selected object in angularjs?

Question

I have a slider, something like this:

 <md-slider aria-label="text size" step="1"
            ng-change="text.setProperty('fontSize', fontSize)"
            ng-model="fontSize" min="1" max="100">
 </md-slider>

Two texts are added to canvas. This is how I get properties of selected text:

canvas.fabric.on('object:selected', function(object) {
    if (object.target instanceof fabric.Text) {
        console.log(object.target);
    }
});

object.target returns an object with properties something like this: object.target.fontSize:126 and of course this for both objects are different.

How to easily update the model (the input field with the font size value) so that it would display a font size based on the selected object. Right now it shows the same value if I select any of the text objects. Thanks!

Answer 1

You need to call $apply() to trigger the $digest cycle so that your value updates in the view.

You can set the value of fontSize in your controller followed by $scope.$apply() like so:

canvas.fabric.on('object:selected', function(object) {
    if (object.target instanceof fabric.Text) {
        console.log(object.target);
        $scope.fontSize = object.target.fontSize;
        $scope.$apply();
    }
});