how to show/hide div based on drop down selection using angular?

Question

i want to show and hide a div based on selection from the drop down , here is my code, this is my html code for dropdown which fetches the values from the "selectItemsFilterCriteria" json structure

<select  ng-model="appointment" ng-change="changeme()"  ng-options="item.name for item in selectItemsFilterCriteria">
                <option ng-option value="" >Filter Criteria</option>
            </select>

this is my changeme() function created inside a controller

$scope.changeme = function() {
    $scope.appointment = $scope.items[0];
  }

this is code for my div that is to be show or hide , right now my code is working on selection of first option from drop down it is showing me the div but the problem is that its not hiding that div on the selection of any other option from the dropdown list, kindly tell me where im doing wrong??

 <div class="mycontainer"  ng-show=appointment >
            <div class="left-nav">
                <accordion close-others="true">
                    <accordion-group ng-repeat="item in pagedItems[currentPage] |filter:{name:item.name}| orderBy:sortingOrder:reverse">
                        <accordion-heading>
                            <table>
                                <tr class="odd" ng-click="showDataDetail=!showDataDetail" style="cursor: pointer">
                                    <td><p class="lead-name">{{item.name}}</p>
                                        <p class="call-up-icon">{{item.phoneNo}} </p>
                                        <p>Lead Date : 07/02/2015</p></td>
                                    <td><p></p>
                                        <p class="blue-txt">{{item.trade}}</p>
                                        <p class="fl cstm-wdth">GNU09</p>
                                        <p class="fl">{{item.time}}</p>
                                        <div class="cb"></div>

                                    </td>
                                    <td><p>Today</p>
                                        <p>C#SQL</p>
                                        <p class="blue-remark-icon"></p></td>
                                </tr>
                            </table>
                        </accordion-heading>

                        <div>{{item.data}}</div>
                    </accordion-group>
                </accordion>
            </div>
        </div>

items array:

$scope.selectItemsFilterCriteria = [
    {id:1 , name:"Appointments Scheduled"},
    {id:2 , name:"fresh leads"}

  ];

Answer 1

Basically the problem is with your ng-change function call,

$scope.changeme = function() {
  $scope.appointment = $scope.items[0];
}

You are setting appointment to first value of items array . Hence whenever you change the options, the function sets it back to first option , in turn the div is shown.

Please remove the ng-change function and try.

Answer 2

Remove the $scope.changeme() function. It is not necessary.

Since you are using ng-model on select whatever option you select will get assigned to the ng-model ie appointment in your case.

Here is the plunkr example