Event pass from button 1 to button 2

I have 2 buttons in a same location, control appearing by ng-if. Button 1 set ng-click, button 2 includes a select box.
Now I am facing a problem: When I click on button 1 (button 1 will be disappeared and button 2 will be appeared). But selection box in button 2 will be shown already. I don’t know why selection box show that I have not tapped on button 2.

I try to add event.stopPropagation() in the end of button 1’s function. but it is not run with my expect.

How can I do to fix this?
Thanks!

This is my html code:

<!--button 1 -->
<div ng-if="showButton1 == true">
    <img ng-src="{{dataTableOffIcon}}" />
</div>
    <!--button 2-->
<div ng-if="showButton1 != true">
    <div>
        <img ng-src="{{calculatorIcon}}">
    </div>
    <select ng-model="computationActive.selected" 
        ng-options="item.id as item.name for item in computationListWithReset"
        ng-change="changeComputationWithOpenModal(computationActive.selected)" style='opacity:0;'>
    </select>
</div>

Make sure to use strict equality, showButton1 === true instead of showButton1 == true. If that does not work, try to provide us with a CodePen, Plunker, or something similar so we can see how your controller looks like.

It just happens when running on mobile mode.

Are you initializing showButton1 to false? If not, the check of “showButton1 != true” will return true if it is undefined.

How about trying this:

New variable called showButton, which gets initialized like this:

$scope.showButton = "button1"

Then in html change it to this:

<!--button 1 -->
<div ng-if="showButton === 'button1'">
    <img ng-src="{{dataTableOffIcon}}" />
</div>
    <!--button 2-->
<div ng-if="showButton === 'button2'">
    <div>
        <img ng-src="{{calculatorIcon}}">
    </div>
    <select ng-model="computationActive.selected" 
        ng-options="item.id as item.name for item in computationListWithReset"
        ng-change="changeComputationWithOpenModal(computationActive.selected)" style='opacity:0;'>
    </select>
</div>

Then finally after someone clicks the first button (button 1), instead of trying event.stopPropagation() (which you shouldn’t really need to ever use unless you are doing something like modifying a library), you can do

$scope.showButton = 'button2'