I am using tabbar in a page. There are two ons-tab items Tab1 and Tab2. The issue is, at the initialization of the page, the functions of Tab2 are also running. For example, I have placed a Progress Dialog in Tab2. It is supposed to display when the user click on the Tab2. But it is displaying during the page intialization. In the code you can see I have a function ShowDialog()
on ng-init. It should be only called when the used click on the Tab2.
<ons-tabbar var="eventsTab">
<ons-tab active="true" page="all.html" icon="ion-android-list" label="ALL PROGRAMS"></ons-tab>
<ons-tab icon="ion-ios-location" label="Nearby Programs" page="nearby.html" ></ons-tab>
</ons-tabbar>
<ons-template id="all.html">
<ons-list ng-controller="EventsController">
<ons-list-item modifier="chevron" ng-repeat="event in events | filter:searchVal track by $index" ng-click="showEvent($index)">
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="nearby.html">
<ons-list ng-controller="EventsController" ng-init="showDialog()">
<ons-list-item modifier="chevron" ng-repeat="event in events | filter:searchVal track by $index" ng-click="showEvent($index)">
</ons-list-item>
</ons-list>
</ons-template>