Q:

AngularJS - move functions from controller to service

I am new with AngularJS, I did some kind of simple quiz application, above is my controller which holds all logic of application which Angular uses: 
var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, $http) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.successCallBack = function(data) {
            $scope.options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];
            $scope.questionId = data.questionId;
            $scope.title = data.title;
            $scope.correctAnswer = true;
        };

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            $http.get("/api/Quiz")
                .success(function(data) {
                    $scope.successCallBack(data);
                })
                 .error(function () {
                     $scope.title = "Oops... something went wrong";
                 });
        }

        $scope.sendAnswer = function (questionId, answer) {

            $http.post("/api/Quiz", { 'questionId': questionId, 'chosenAnswer': answer }).success(function (data) {
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();
            }).error(function () {
                $scope.title = "Oops... something went wrong";
            });
        };

    });

The next step I want to do is to move some functions to service.
The question is how to do this? Let's look at nextQuestion() function - I would like to move it to service, but this function modify $scope elements (title,options) which I won't have access to from service. Second problem is that this function calls successCallBack() function.
It would be great if someone could write a code of example of service which could manage my functions - nextQuestion() and sendAnswer(), because I am stuck in there
UPDATE
var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, quizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.successCallBack = function (data) {
            $scope.options = data.options;
            $scope.questionId = data.questionId;
            $scope.title = data.title;
            $scope.correctAnswer = true;
        };

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

              quizService.nextQuestion().then(function(data) {
                  $scope.successCallBack(data);
                })
                 .catch(function () {
                     $scope.title = "Oops... something went wrong";
                 });
        }

        $scope.sendAnswer = function (questionId, answer) {

           quizService.sendAnswer().then(function (){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();
            }).catch(function () {
                $scope.title = "Oops... something went wrong";
            });
        };

    });

/// <reference path="../controllers/quizController.js" />

myApp.factory("quizService", function($http, $q) {

    var self = {};

    self.nextQuestion = function () {
        var deferred = $q.defer();
        $http.get("/api/Quiz").then(function(data) {
            var options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];

            data.options = options;
            deferred.resolve(data);
        }).catch(function(err) {
            deferred.reject(err);
        });
        return deferred.promise;
    };

    self.sendAnswer = function (questionId, answer) {
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;
});

Not working - console in developer tools doesn't give any error, there is no data in my page, what to do?

A:

Try something like this:
var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, QuizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            QuizService.nextQuestion().then(function(data){
                $scope.options = [
                    {
                        name: data.answerA,
                        chosen: "A"
                    },
                    {
                        name: data.answerB,
                        chosen: "B"
                    },
                    {
                        name: data.answerC,
                        chosen: "C"
                    },
                    {
                        name: data.answerD,
                        chosen: "D"
                    }
                ];
                $scope.questionId = data.questionId;
                $scope.title = data.title;
                $scope.correctAnswer = true;

            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

        $scope.sendAnswer = function (questionId, answer) {
            QuizService.sendAnswer().then(function(){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();                
            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

    });

myApp = angular.factory('QuizService', function($http){

    var self = {};

    self.nextQuestion = function(){
        return $http.get("/api/Quiz");
    };

    self.sendAnswer = function(questionId, answer){
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;

});

I didn't tested it, but should work.
UPDATE I
If you want move the options to the service, you should refactor in this way:
var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, QuizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            QuizService.nextQuestion().then(function(data){
                $scope.options = data.options; // refactored here
                $scope.questionId = data.questionId;
                $scope.title = data.title;
                $scope.correctAnswer = true;

            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

        $scope.sendAnswer = function (questionId, answer) {
            QuizService.sendAnswer().then(function(){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();                
            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

    });

myApp = angular.factory('QuizService', function($http, $q){ // inject $q here

    var self = {};

    // the nextQuestion refactored returning a promise
    self.nextQuestion = function(){
        var deferred = $q.defer();
        $http.get("/api/Quiz").then(function(data){
            var options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];
            data.options = options;
            deferred.resolve(data);
        }).catch(function(err){
            deferred.reject(err);
        });
        return deferred.promise;
    };

    self.sendAnswer = function(questionId, answer){
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;

});

