Here is a jsfiddle. /

I have a dropdown selection here for 2. names and numbers.

Select name and then select numbers. once a dropdown is selected for numbers, execute function get executed and a output is displayed at the console.

This might look like it is working fine. but open the console and click on the dropdown. execute function executes before we even select a dropdown option.

How to ensure that execute function should execute only when the user clicks on one of the option tags ?

Markup:

<div ng-controller="MyCtrl">
    <div>
        <label>Names:</label>
        <select ng-model="params.name">
            <option value="pa">Taeo</option>
            <option value="ws">Wers</option>
            <option value="pn">Petin</option>
        </select>
        <br>
        <label>Numbers:</label>
        <select ng-click="execute()">
            <option value="22">22</option>
            <option value="33">33</option>
        </select>
    </div>
</div>

Here is a jsfiddle. http://jsfiddle/cuycbxxp/

I have a dropdown selection here for 2. names and numbers.

Select name and then select numbers. once a dropdown is selected for numbers, execute function get executed and a output is displayed at the console.

This might look like it is working fine. but open the console and click on the dropdown. execute function executes before we even select a dropdown option.

How to ensure that execute function should execute only when the user clicks on one of the option tags ?

Markup:

<div ng-controller="MyCtrl">
    <div>
        <label>Names:</label>
        <select ng-model="params.name">
            <option value="pa">Taeo</option>
            <option value="ws">Wers</option>
            <option value="pn">Petin</option>
        </select>
        <br>
        <label>Numbers:</label>
        <select ng-click="execute()">
            <option value="22">22</option>
            <option value="33">33</option>
        </select>
    </div>
</div>

• javascript
• html
• angularjs
• angularjs-ng-click

• 1 ng-click will trigger when you click any element with that decorator, not the option. I think ng-change will probably be a better directive in your case ? – thsorens Commented May 3, 2016 at 22:07
• @thsorens- wld u like to put it as an answer ? i see others have answered it but u did it first. Thanks guys. my understanding is a tad better now with ng-click and ng-change. – Patrick Commented May 3, 2016 at 22:10
• 1 I posted my answer now. – thsorens Commented May 3, 2016 at 22:14

3 Answers 3

ng-click will trigger when you click any element with that decorator, not the option. I think ng-change will probably be a better directive in your case.

Change <select ng-click="execute()"> to <select ng-change="execute()">

The ng-click gets executed whenever you click on the object (in this case, the dropdown). The ng-change gets executed when the form element is changed, which is whenever the user changes the dropdown item.

You need to use angular ng-change (ngChange).

Use

ng-change="execute()"

instead of

ng-click="execute()"

Doc Reference ng-change: https://docs.angularjs/api/ng/directive/ngChange

Doc Reference ng-click: https://docs.angularjs/api/ngTouch/directive/ngClick

Since you use ng-click, the click event fires at the time you click the select box. However if you use ng-change, the change event will fire when the select box's value change based on the option selection, thus execute() will fire.