Dynamic Site Page Titles with Angular and UI-Router

Pardon the CoffeeScript but should be able to translate easy enough.
I was looking into having different page titles for each ui-route and didn't find great examples so here you go:

<title ng-bind="$state.current.data.title + ' | Site Name'">Site Name</title>

angular.module('app', [])
  .run(($rootScope, $state) ->
    $rootScope.$on('$stateChangeStart', ->
      $rootScope.$state = $state
    )
  )

angular.module('app')
  .config ($stateProvider) ->
    $stateProvider
    .state('main',
      url: '/',
      templateUrl: 'app/main/main.html'
      controller: 'MainCtrl'
      data:
        title: 'Home'
)