Ignore ng-click when opening dropdown

Question

I have a list with options, which I loop into a select with ng-options. Then I would like to call a function, when I click on one of the options. I tried it first with ng-change, but the problem I had is, that I can't detect a change, when I clicked on the same option twice in a row, so it just calls the function when I click the first time on it. Than I tried it with ng-click. The problem now was, that it also detects the click, when I open the dropdown. So it calls then also the function. Is there a way, to ignore the click when I open the dropdown and just detect it, when a click on a option? I also tried to give the $event as parameter in my function and check there, if the option was clicked, but I didn't found the solution. This is my code:

<select ng-options="option as option.name for option in myOptionsList" ng-model="currentOption" ng-click="myFunction($event)"></select>

My list:

myOptionsList = [
    {id: 1, name: 'Option 1'},
    {id: 2, name: 'Option 2'},
    {id: 3, name: 'Option 3'}
];

My function:

myFunction(event) {
    console.log(event);
    console.log('Print this if only option was clicked!');
}

Any ideas how to ignore ng-click when I just open the dropdown and just detect it when option was clicked, or how to detect ng-change when the selected option was clicked again? Thanks.

=======================================================================

EDIT - EXAMPLE: I have a window, where I can filter a list. This window I open with a option in my select. So when I open the select, it opens the window. Now imagine, that I set some filter criterias, close the window and my list is filtered now. The option, which opens the filter is still selected. Now I see, that I have to change my filter criterias a little bit, so I open the dropdown again, and click a second time on the option to open the window, but id doesn't work, because it's still selected and ng-change didn't detect any changes in the select. How can I force this:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentOption;
  $scope.showWindow = false;

  $scope.myOptions = [{
    id: 1,
    name: 'This opens the window'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];

  $scope.showOption = function() {
    if ($scope.currentOption.id == 1) {
      $scope.showWindow = true;
    }
    console.log($scope.currentOption);
  }

  $scope.closeWindow = function() {
    $scope.showWindow = false;
  }
});

.filterWindow {
  width: 100px;
  height: 100px;
  background-color: rgba(50, 50, 50, 0.5);
  z-index: 100;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <select ng-options="option as option.name for option in myOptions" ng-change="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
    Some filter criterias...
  </div>
</div>

Thanks again

Answer 1

Use This Instead:

<select ng-options="option as option.name for option in myOptionsList" 
       ng-model="selectedItem" ng-change="update()">
</select>

Controller

$scope.myOptionsList = [
    {id: 1, name: 'Option 1'},
    {id: 2, name: 'Option 2'},
    {id: 3, name: 'Option 3'}
];
  $scope.update = function() {
    console.log($scope.selectedItem)
  }

Here is the Working JS FIDDLE link: http://jsfiddle.net/jazibbashir/G8S32/1855/

==========================================================================

New Requirment Solution

Just replace ng-change with ng-click.

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.currentOption;
  $scope.showWindow = false;

  $scope.myOptions = [{
    id: 1,
    name: 'This opens the window'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];

  $scope.showOption = function() {
    if ($scope.currentOption.id == 1) {
      $scope.showWindow = true;
    }
    console.log($scope.currentOption);
  }

  $scope.closeWindow = function() {
    $scope.showWindow = false;
  }
});

.filterWindow {
  width: 100px;
  height: 100px;
  background-color: rgba(50, 50, 50, 0.5);
  z-index: 100;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <select ng-options="option as option.name for option in myOptions" ng-click="showOption()" ng-model="currentOption"></select>

  <div ng-if="showWindow" class="filterWindow">
    <button ng-click="closeWindow()">Close</button>
    Some filter criterias...
  </div>
</div>

Answer 2

We can achieve this with little hack.

Example on jsfiddle.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.myOptionsList = [{
    id: 1,
    name: 'Option 1'
  }, {
    id: 2,
    name: 'Option 2'
  }, {
    id: 3,
    name: 'Option 3'
  }];
  $scope.update = function($event) {
    if ($event.screenX == 0)
      console.log('click on OPTION');
    else
      console.log('click on SELECT');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="option as option.name for option in myOptionsList" ng-model="selectedItem" ng-click="update($event)">
  </select>
  {{selectedItem.id}} {{selectedItem.name}}
</div>