performance problems simple android game - ionic - firebase - angularjs

Im making an android game using ionic, the piece of code responsible for the navigation to pages and the detection of which page (and level) the user is on is really slow (3 secs load each screen).

app.controller("worldCtrl", function($scope, $location, $state, $stateParams, credentials, currentUser, $firebaseObject, $firebaseArray) {
       //get auth details
        var user = currentUser.google.id;
        var information = new Firebase("https://s.firebaseio.com/users/" + user);
        $scope.information = $firebaseObject(information);
        //create content based on page location
        var userUrl = $location.path();       
        //world 1
        if ( userUrl === "/app/world/world1") {
          //world information
          //get level id and go to the page
          $scope.World = function(index) {
            $scope.levelSelected = index + 1;
            $state.go('app.level', {level: $scope.levelSelected} );
          }   
          $scope.world = "1";
          $scope.background = "img/world1/background.jpg";
          $scope.levels = [
            { thisLevel: "1", background: "img/world1/1.png" },
            { thisLevel: "2", background: "img/world1/2.png" },
            { thisLevel: "3", background: "img/world1/3.png" },
            { thisLevel: "4", background: "img/world1/4.png" },
            { thisLevel: "5", background: "img/world1/5.png" },
            { thisLevel: "6", background: "img/world1/6.png" }
          ];
        }
        //world 2
        else if ( userUrl === "/app/world/world2" ){
          $scope.world = "2";
          $scope.background = "img/loginbg.jpg";
          $scope.levels = [
            { thisLevel: "7", background: "img/world1/7.png" },
            { thisLevel: "8", background: "img/world1/1.png" },
            { thisLevel: "9", background: "World9" },
            { thisLevel: "10", background: "World10" },
            { thisLevel: "11", background: "World11" },
            { thisLevel: "12", background: "World12" }
          ];

          $scope.World = function(index) {
            $scope.levelSelected = index + 8;
            $state.go('app.level', {level: $scope.levelSelected});
          }   
        }
        //get firebase data.value's
        information.once("value", function(snapshot) {
              var data = snapshot.val();
              $scope.username = data.username;
        });
});
app.controller("levelCtrl", function($scope, $location, $state, $stateParams, credentials, currentUser, $firebaseObject, $firebaseArray) {
       //get auth details
        var user = currentUser.google.id;
        var information = new Firebase("https://s.firebaseio.com/users/" + user);
        $scope.information = $firebaseObject(information);
        //create content based on page location
        var userUrl = $location.path();       
        $scope.level = userUrl;
        information.once("value", function(snapshot) {
            var data = snapshot.val();
            $scope.username = data.username;
        });
        function getLevelPlaying(str) {
            return str.split('/')[3];
        }
        $scope.levelPlaying = getLevelPlaying(userUrl);
        $scope.background = "img/playscreen/" + $scope.levelPlaying + ".png";
        console.log($scope.background);
});

I had some improvements after making the images smaller, but then the quality is just way to bad.

I have this for the correct Quality settings:

This is the css which makes it the correct position on all devices :

#PlayScreen .gameheader {
    margin:0 auto;
    border: 0px;
    background-position: center;
    background-size: cover;
}

and it gets displayed using this piece of html

<div class="gameheader row"
         style="background-image: url({{background}});height:150px;width:100%;">        
</div>

Also tried "imagecachefactory.js" for performance boost, i didn't see much improvement.

Is there anything I'm missing to fix this speed problem or how to improve the quality when using smaller files?