AngularJS: get JSON data from Service to Controller

My original code:

In services.js:

angular.module('starter.services', []).factory('Api', function($http){
	return{
		getRoles: function(){
			var url = 'data/roles.json';
			$http.get(url).success(function(data){
				return data;
			});
		}
	}
});

In controllers.js:

angular.module('starter.controllers', ['ngCookies'])

.controller('LoginCtrl', function($scope, $location, $cookieStore, $http, cssInjector, User, Api){
		$scope.roles = Api.getRoles();
});

results in $scope.roles "Undefined".

After viewed this post:

http://stackoverflow.com/questions/18704638/angularjs-returning-json-data-from-service-to-controller

Made the changes: 

In services:

getRoles: function(){
			var url = 'data/roles.json';
			var promise = $http.get(url).success(function(data){
				return data;
			});
			return promise;
		}

In controllers:

Api.getRoles().then(function(response){
		$scope.roles = response.data;
	});

Then it works!