I am new to working with angularjs and onsen ui. I have implemented a modal in an ajax request, which is supposed to hide upon successful response. Everything seems to be working fine, except for the fact that when I navigate back to the page, the modal reappears and does not hide again. Can someone please assist me in identifying where I may have gone wrong? Below is a snippet of my code:
HTML
<ons-navigator animation="slide" var="gallery">
<ons-page style="background: #FFFFFF url('images/splash-screen.png') repeat scroll 0 0 / cover;" class="homepage">
<ons-toolbar style="height: 120px; padding-top: 10px;">
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-android-menu" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">
<img src="images/logo.png" alt="Cayman After Work" style="max-width: 130px;"/>
...
</ons-page>
</ons-navigator>
JavaScript
app.controller('menuController', function ($http, $scope, $compile, $filter, $sce)
{
var Start = '0';
var Pagesize = '10';
modal.show();
$http({
method: 'POST',
url: API_HOST+'/webservice/categorylist',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data : "&Start=" + Start + "&Pagesize=" + Pagesize
}).success(function ( data )
{
modal.hide();
var i;
var Content = ' ';
var resid = ' ';
var imglogo='';
...
});
//$scope.alert = function() {
//
//};
});