How to implement loading spinner to inappbrowser in ionic framework

Question

im currently working in ionic framework with inappbrowser but any time i open the external url link it open another broswer but i want it indicate loading spinner so users will know it is loading, i dont know want it to open with system browser

 <div class="list">
      <a class="item item-avatar" href="#" ng-click="loadData()" onclick="window.open('http://www.mysite', '_blank', 'location=yes'); return false; ">
          <img src="img/be1.png">
              <h2>site here</h2>
      </a>
      </div>

and my controller

    .controller('MyCtrl', function($scope, $ionicLoading, $timeout) {
    $scope.myTitle = 'Loading Sample';

    $scope.loadingIndicator;

    $scope.counter = 0;



    $scope.loadData = function() {

        $scope.loadingIndicator = $ionicLoading.show({
            template: '<ion-spinner icon="spiral"></ion-spinner>'
        });

        $timeout(function() {

            $ionicLoading.hide();
        }, 1500);

    };
})

thanks

Answer 1

In loadData() itself add

var ref=window.open('http://www.mysite', '_blank', 'location=no');

(location=no to hide url bar)

ref.addEventListener('loadstart', function() { $ionicLoading.show() }); ref.addEventListener('loadstop', function() { $ionicLoading.hide() });