updating page title dynamically in angularJS

Question

I'm trying to change the page title dynamically using UI-ROUTER. the page title that will be displayed is the same hat will be used in the URL :courses I know that i had just to bind the retrieved data to the page title but as I'm new to angular and JS I wasn't able to do it. here is my code:

angular
    .module('myApp.courses', [ 'ui.router', 'ngResource' ])
    .config(
            [
                    '$stateProvider',
                    '$urlRouterProvider',
                    function($stateProvider, $urlRouterProvider) {
                        $stateProvider
                                .state(
                                        "introduction_to",
                                        {
                                            url : "courses/:courses",
                                            views : {
                                                "mainbody" : {
                                                    templateUrl : "resources/html/course_details.html"
                                                },
                                                "derivativebody" : {
                                                    templateUrl : "resources/html/course_chapter.html"
                                                }
                                            },
                                            data : {
                                                pageTitle : "introduction_to",
                                                authenticate : true
                                            }
                                        });}]);

here the page title is not set dynamically, what I'm trying to do is to have the page title like this way: introduction to + 'course name'. I tried with $stateParams.courses but it's not working, some thing like this

data :{
                pageTitle : "introduction_to" + $stateParams.courses,
                authenticate : true
            }

I'm using this controller to change the title

.controller(
            'AppController',
            function AppController($scope, $location,$state, sessionService) {
                $scope.$on('$stateChangeSuccess', function(event, toState,
                        toParams, fromState, fromParams) {
                    if (angular.isDefined(toState.data.pageTitle)) {
                        $scope.pageTitle = toState.data.pageTitle
                                + '| MyAcademy';
                    }
                    if ((toState.data.authenticate
                            && !sessionService.isLoggedIn())) {
                        $state.go("login");
                        event.preventDefault();
                    }
                });
            });

the title name is received from this ng-href="courses/{{name.name}}" here is my HTML from where i'm getting the title

<div class="row l-b-margin">
                <div class="col-md-4" ng-repeat="name in Courses.slice(0,3)">
                    <div class="well well-white">
                        <img alt="R Programming" class="center-block l-b-margin"
                            height="100" ng-src="{{name.logo}}" width="100" />
                        <h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
                        <p class="text-space l-b-margin">Write your first code here</p>
                        <a class="rounded-button cta-border-button center-block m-button"
                            ng-href="courses/{{name.name}}">Start Course</a>
                    </div>
                </div>
            </div>