how can I change div content that has class of "ng-isolate-scope"?

I have a select tag like below

    <select id="market-watch-sectors-select" name="market-watch-sectors-select"
 style="height: 30px;" class="tp-w-300 tp-ma-rl-10 ng-isolate-scope tp-te-bo">
        <option value="-1">all</option>
        <option value="33">measure</option>
        <option value="10">tools</option>
    </select>

so when I want to change div content that is depend on value of above select tag by this code

document.getElementById("market-watch-sectors-select").value="-1"

nothing happened

how can I deal with 'ng-isolate-scope' inside that.

I suggest that my problem comes from this.

Solution

You should drive your HTML via your model in Angular. You shouldn't need to modify anything in the HTML using the old school DOM manipulation way.

If you want to change the div content depending on the value of a dropdown:

You have to set a change event handler function in the dropdown
In the dropdown change function then you will have to set some flags of whatever that will change the div. The flag will have to be set as a field in the Angular component for example.
In the HTML template then check when you are defining the div content use some if function or something to detect that the flag has changed and change the content based on that