AngularJS small test app renders extremely slow

I am learning angular by using it in a project of mine that looks as follow :

  • Node.js/express on the backend
  • Jade for views and partials
  • Angular on the frontend.

I have easily setup the routing and have been able to display all my (yet static) partials properly.

The problem arose when I added my first controller: I added a $http get to grab user info from the server, then display it in the input fields of a form. It works all the way, but the page became EXTREMELY slow, to the point where opening a select dropdown takes about 2 seconds on my PC... Am I doing something horribly wrong?

The slowing down appears whether I display the values or not, if I remove all the {{user.}} from the view, it is still very slow.

The http request is executed almost instantly, so I don't see how it can have an influence... I'm running out of ideas.

Again, it is not a page loading time problem, the issue here is that something in this app is eating up massive amounts of CPU continuously, and I don't know what/why.

controller code (in /app/controlers.js):

function ProfileCtrl($scope, $http) {
  $http.get('/api/userinfo')
    .success(function(data, status, headers, config) {
      $scope.user = data;
    }); 
}

module code : 

angular.module('DTTB', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/index',
        controller: IndexCtrl
      }).
      when('/settings', {
        templateUrl: 'partials/settings',
        controller: SettingsCtrl
      }).
      when('/profile', {
        templateUrl: 'partials/profile',
        controller: ProfileCtrl
      }).
      when('/support', {
        templateUrl: 'partials/support',
        controller: SupportCtrl
      }).
      otherwise({
        redirectTo: '/'
      });
    $locationProvider.html5Mode(true);
  }]);

view template : 

form#form.form-horizontal(ng-controller='ProfileCtrl')
  section.panel
    header.panel-heading
      h2.panel-title Profile
      p.panel-subtitle
        | Your basic information
    .panel-body
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Full Name
        .col-sm-9
          input.form-control(type='text', name='fullname', placeholder='John Doe', required='required' , value='{{ user.full_name }}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | Street Address 1
        .col-sm-9
          input.form-control(type='text', name='address1', placeholder='123 W. Sesame Street', required='required' , value='{{user.address1}}')
      .form-group
        label.col-sm-3.control-label Street Address 2
        .col-sm-9
          input.form-control(type='text', name='address2', placeholder='Suite #, Unit #, Apt #' , value='{{user.address2}}')
      .form-group
        label.col-sm-3.control-label
          span.required *
          | City
        .col-sm-9
          input.form-control(type='text', name='city', placeholder='Los Angeles', required='required' , value='{{user.city}}')

EDIT : I've removed all controllers, and to some extent, I see the same slowness problem... So it seems that the simple fact that I add angular to my page makes it very very slow. Now, I use a bootstrap3 admin template with a lot of other JS/css dependencies, could it explain this behaviour?

EDIT 2 :

It may be worth mentioning that the CPU sucking starts only when I load a partial. I have tested this by swapping the partial containing the controller with the index one, this way it displays on page load, and the speed is perfectly normal. The moment I load another partial, it starts again.

Update on the problem, and sort of a solution :

AngularJS is awesome. But it doesn't mix well with the heavily jQuerized templates available everywhere on the web. My problem came from the bootstrap template I had which was loading a lot of jquery plugins and doing many init functions on all these plugins. When I navigated to a partial, a lot of elements were changing, lots of events bound to these elements wouldn't exist anymore, and the browser couldn't figure out what was happening.

I solved the problem in 2 different manners :

Using directives to init my plugins when convenient.

When the code was just too damn long, I've added the init functions to my controller `

$scope.$on('$viewContentLoaded',function(){ 
    $(function(){
        /*jQuery init stuff goes here*/
    });
});

For the newbies like me, this event is fired when an AngularJS view is loaded.

I know it's a bad practice, but it's too late now in this dev to ask everyone to change the theme. Small price to pay to get to learn this exciting framework. Next project, I'll try avoiding jQuery from the start.

Lesson well learned!