Get data from json pages using services with same controller in different partial pages

Question

Am trying to get different json pages data using services within the same controller. Here is the sample code

app.js file

var app = angular.module('drinks-app', ['ui.bootstrap']);

//Setting up the app

app.config([ '$routeProvider', function( $routeProvider ) {

// routes

$routeProvider.when('/', {
   templateUrl: 'drinks_list.html',
   controller: 'MainCtrl'
}).when('/:drinkid', {
   templateUrl: 'drink_editor.html',
   controller: 'MainCtrl'
}).otherwise({
   redirectTo: '/drinks', 
   templateUrl: 'drinks_list.html',
   controller: 'MainCtrl'
});

// controller

app.controller('MainCtrl', function( $scope, $location, $routeParams, Drink) {
   Drink.getDrinks().success(function(drink) {       
        $scope.data = drink   
   });
});

//factory

app.factory('Drink', function($http) {
    var Drink = function(data) { angular.extend(this, data);    
        this.getData = function() {
             return $http.get('drink.json').then(function(response){
                    return response.data; 
             });
         }      
     }
})