How to manipulate AngularJS scope properties with external JS

I have a table (html) filled with some data which is provided with AngularJS. Now I would like to change a particular property of each entry within the scope. How can I access and manipulate a specific property of a tuple in a scope?

I tried as shown in JavaScript code below. It all worked well until the alert pops up. The code below the alert $scope.selects.day = 'Superhero'; didn’t work. What’s the problem here?

HTML table:

<select name="manipulate" onchange="change()">
    <option value"doSomething">Do Something</option>
    <option value"doSomethingElse">Do Something else</option>
</select>

<table>
    <tbody>
        <tr ng-repeat="select in selects | filter:model">
            <td></td>
            <td></td>
        </tr>
    </tbody>

Angular JS:

var myApp = angular.module('myApp', ['ui.filters']);
myApp.controller('controller', function($scope) {

var content = [ 
    {subcategory: 'XYZ',day: 'Monday',},
    {subcategory: 'ABC',day: 'Tuesday',},
];

$scope.selects = content
});

Java Script:

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();

    $scope.$apply(function() {

    //alert('Works until here')
    $scope.selects.day = 'Superhero';

    });
}

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/02/how-to-manipulate-angularjs-scope-properties-with-external-js/
via @lzomedia #developer #freelance #web #lzomedia.com