angular controller doesn't work after page changed - facebook

Question

I have an angular app generated by yeoman,and it has two pages.
And I set a routeProvider for these two pages:
angular.module('fbPostApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
$routeProvider
.when('/friend-filter', {
templateUrl: 'views/friend-filter.html',
controller: 'FriendFilterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
MainCtrl:
function MainCtrl($scope,$http) {
window.fbAsyncInit = function() {
FB.init({
appId : 'Myid',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
$scope.login = function(){
FB.login(function(response) {
$scope.uid = response.authResponse.userID;
$scope.accessToken = response.authResponse.accessToken;
login_success($scope.uid,$scope.accessToken);
});
}
................
};
};
};
FriendFilterCtrl:
function FriendFilterCtrl($scope,$http) {
window.fbAsyncInit = function() {
FB.init({
appId : 'Myid',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
$scope.login = function(){
FB.login(function(response) {
$scope.uid = response.authResponse.userID;
$scope.accessToken = response.authResponse.accessToken;
login_success($scope.uid,$scope.accessToken);
});
}
................
};
};
}
My link:
Main
Friend
When I get into both pages their controllers work very well(Login with your Facebook).However, if I "switch" to another page by link,I can get the page's template but it won't do anything.
So I want to ask that is there anything I missed or did wrong cause this situation?

Answer 1

Put this code outside of any angular controller:
window.fbAsyncInit = function() {
FB.init({
appId : 'Myid',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
Your controller(s) should now look like:
angular.module('fbPostApp').controller('MainCtrl', ['$scope','$http', function ($scope,$http) {
$scope.login = function(){
FB.login(function(response) {
$scope.uid = response.authResponse.userID;
$scope.accessToken = response.authResponse.accessToken;
login_success($scope.uid,$scope.accessToken);
});
}
................
}])
Note: if you have a global Facebook login button, you shouldn't copy your $scope.login function to every single controller in the app. Learn about angular directives.