Angualar JS translate and dynamic elements?

I'm using AngularJS to create a multi-lingual site, but I'm having problems with dynamically created elements.

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(function($translateProvider) {
    $translateProvider.translations('en', {
         'title': 'title'

    }.translations('pt', {
         'title': 'titulo'
    }

    $translateProvider.preferredLanguage('en');
});

<div ng-app="myApp" id="myDiv">
      <span>{{ 'title' | translate }}</span>
</div>

But if I add a new span to my div, for example:

$("#myDiv").append("<span>{{ 'title' | translate }}</span>");

The content of span is not translated with the value of title .