Ui-router views cannot find method in controller

I have this ui-router and it works great, redirects me to bubblesettings page.

 .state('bubblesettings', {
        url: '/bubble/:bubbleId/settings',

        data: {
            authorizedRoles: [USER_ROLES.editor]
        },
        views: {
            'navigation': {
                templateUrl: "/js/shared/partials/navigation.html"
            },
            'main': {
                templateUrl: "/js/shared/partials/bubbles/bubble-settings.html"

            }
        }
    })

      

        
        
        
      

    

In this controller, I want to make a service call to get the bubble users.

(function () {
    'use strict';

    angular
        .module('raqtApp')
        .controller('BubblesSettingsController', BubblesSettingsController);

    BubblesSettingsController.$inject = ['$scope', '$rootScope', '$stateParams', 'BubblesService', '$state'];

    function BubblesSettingsController($scope, BubblesService, $rootScope, $stateParams, $state) {

        $scope.bubbleId = $state.params.bubbleId;

        $scope.getMembersInBubble = function (bubbleId) {
            BubblesService.getBubbleUsers(bubbleId)
                .then(function (data) {
                    $scope.bubbleUsers = data;
                    console.log('Sucesss');
                },
                function (data) {
                    console.log('Fail..');
                })

        };
    }
})();

      

        
        
        
      

    

When I call my getMembersInBubble function I get

TypeError: BubblesService.getBubbleUsers is not a function
    at Scope.BubblesSettingsController.$scope.getMembersInBubble (http://localhost:3604/js/bubbles/settings/bubble-settings-controller.js:20:28)
    at fn (eval at <anonymous> (https://code.angularjs.org/1.4.0-rc.1/angular.js:12931:15), <anonymous>:2:350)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (https://code.angularjs.org/1.4.0-rc.1/angular.js:22919:17)
    at Scope.$get.Scope.$eval (https://code.angularjs.org/1.4.0-rc.1/angular.js:15574:28)
    at Scope.$get.Scope.$apply (https://code.angularjs.org/1.4.0-rc.1/angular.js:15673:23)
    at HTMLButtonElement.<anonymous> (https://code.angularjs.org/1.4.0-rc.1/angular.js:22924:23)
    at HTMLButtonElement.jQuery.event.dispatch (http://localhost:3604/js/lib/jquery/jquery.js:4435:9)
    at HTMLButtonElement.jQuery.event.add.elemData.handle (http://localhost:3604/js/lib/jquery/jquery.js:4121:28)

      

        
        
        
      

    

This is my service

   this.getBubbleUsers = function (bubbleId) {

    var deferred = $q.defer();
    $http(
        {
            method: 'get',
            url: baseUrl + "/api/bubble/" + bubbleId + "/users",
            headers: { "Authorization":      RaqtGlobal.getAuthToken().Authorization }
        }).success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject();
        });

    return deferred.promise;
};

      

        
        
        
      

    

I can see that my bubble-service.js is loading into the page, but I cannot find out why I cannot access this method - why does it say it is not a function?

Is it something that it gets loaded inside the view with ut-router, I can't name it ??