Angular directives not working when dynamically loaded

When an HTML fragment is loaded and compiled by Angular, directives are not being linked

by IvoReis

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<div ng-app="myModule">
    <div ng-controller="MyController">
        <p>Try to change the value inside text field: <input type="text" ng-model="item.title"></p>
    <hr>
    <p>{{item.title}}</p>
    </div>

</div>

JavaScript

var myModule = angular.module('myModule', []);

function MyController($scope, $q, $timeout) {
    this.getItem = function () {
        var deferred = $q.defer();
        $timeout(function(){
          $scope.item = {
            title: 'Some title'
          };
          deferred.resolve();},2000);            
        return deferred.promise;
    };
    
    $scope.item = this.getItem();
}