Having some trouble with scope/http/views/state

Hi, I am pretty much a beginner at any sort of web/mobile development. I have been working towards a solution to display tabulated data on a mobile. My data is in a Google Sheet, which now resides in a Firebase Database. The json feed can be viewed here.

Firebase Database

I have worked towards a solution and this is where things stand.

app.js

   .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.oom', {
      url: '/oom',
      views: {
        'menuContent': {
          templateUrl: 'templates/oom.html',
          controller: 'oom'
        }
      }
    })

  .state('app.oomsingle', {
      url: '/oom/:SEQ',
      views: {
        'menuContent': {
          templateUrl: 'templates/oomsingle.html',
          controller: 'oom'
        }
      }
    })
  ;

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/oom');
});

controller.js

.controller('oom', function($scope, $state, $http) {
      $http.get('https://oom-hgt.firebaseio.com/.json')
      .success(function(data, status, headers,config){
      console.log('data success');
      console.log(data); // for browser console
      $scope.oom1 = data.men; // for UI
      $scope.oom2 = data.women; // for UI
	  $scope.oom3 = data.junior; // for UI
    })
      $scope.player1 = $state.params.SEQ;
})

oom.html

<ion-view view-title="Order of Merit">
  <ion-content>
    <div class="item item-divider">
      <div class="row">
        <div class="col">RANK
        </div>
        <div class="col col-60">NAME
        </div>
        <div class="col">PLAYED
        </div>
        <div class="col">POINTS
        </div>
      </div>
    </div>
    <ion-list>
      <ion-item ng-show='item.NAME.length > 0' ng-repeat="item in oom1" href="#/app/oom/{{item.SEQ}}">
        <span>
          <div class="row">
            <div class="col">{{item.RANK}}
            </div>
            <div class="col col-75">{{item.NAME}}
            </div>
            <div class="col">{{item.PLAYED}}
            </div>
            <div class="col">{{item.POINTS}}
            </div>
          </div>
        </span>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

oomsingle.html

<ion-view view-title="New oom">
  <ion-content ng-repeat = "item in oom1"  ng-show='item.SEQ === {{player1}}'>
    <h1>
      SEQ Coming In: {{player1}}
    </h1>
    <br />
    <p>
      <strong>PLAYER:
      </strong> {{item.NAME}}
    </p>
    <p>EVENTS PLAYED: {{item.PLAYED}}
    </p>
    <p>TOTAL POINTS: {{item.POINTS}}
    </p>
    <p>RANK: {{item.RANK}}
    </p>
    <div class="item item-divider">
      <div class="row">
        <div class="col col-75">EVENT
        </div>
        <div class="col">POINTS
        </div>
      </div>
    </div>
    <ion-list>
      <ion-item ng-repeat = "(key,val) in  item.EVENTS">
        <div class="row">
          <div class="col col-75">{{key}}
          </div>
          <div class="col">{{val}}
          </div>
        </div>
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

It’s working all fine except for two things.

  1. If you do have a look at the json data and the controller, I have three scopes, oom1/2/3. I was wondering how could I display all three with some sort of tab interface or buttons perhaps.
  2. Whenever a user will navigate from oom to oomsingle, an http call will be made. That’s how the code works because the same controller is being used. How do I go about segregating the scopes and the http call that is being made, so that multiple http calls aren’t made.

Have spent quite some time to get here, would love some help.
Thanks.