AngularJs custom directive passing scope - angularjs

Question

I have $scope.loaded=false; in controller. Seems like directive doesn't pick up the scope, because ng-show="loaded" still shows DIV. But when I click button and controller changes $scope.sent to true, directive gets scope(it changes class as seen in directive).
Why is directive not picking $scope.loaded?
Message directive is loaded in other view:
<form class="form-horizontal" ng-submit="submit()">
<fieldset>
<!-- Form Name -->
<legend>Contact us</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Your name</label>
<div class="col-md-4">
<input id="name" name="textinput" type="text" placeholder="name" class="form-control input-md" ng-model="model.name" required>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Your email</label>
<div class="col-md-4">
<input id="from" name="textinput" type="email" placeholder="email" class="form-control input-md" ng-model="model.from" required>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Content</label>
<div class="col-md-4">
<textarea class="form-control" id="content" name="textarea" ng-model="model.content" required>your message to us</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary" ng-click>Submit</button>
</div>
</div>
<message-directive></message-directive>
</fieldset>
</form>
I have a custom directive:
(function (angular) {
angular.module('app')
.directive('messageDirective', [function () {
return {
restrict: 'E',
templateUrl: 'partials/message-directive',
scope: true,
link: function (scope) {
scope.loaded = true;
}
};
}]);
})(angular);
TemplateUrl:
<div class="form-group">
<label class="col-md-4 control-label" for="message"></label>
<div class="col-md-4">
<div ng-show="loaded" ng-class="sent ? 'alert alert-success' : 'alert alert-danger'">
{{message}}
</div>
</div>
</div>
Controller:
(function (angular) {
angular.module('app')
.controller('contactController', [
'$scope', 'contactService', function ($scope, contactService) {
$scope.model = {};
$scope.loaded = false;
var successCallback = function () {
$scope.message = "Sent!";
$scope.sent = true;
}
var errorCallback = function () {
$scope.message = "Error!";
$scope.sent = false;
}
$scope.submit = function() {
contactService.createContact($scope.model).then(successCallback, errorCallback);
}
}]);
})(angular);

Answer 1

the directive load after the controller .so your code
link: function (scope) {
scope.loaded = true;
}
rewrite the $scope.loaded

Answer 2

return {
restrict: 'E',
templateUrl: 'partials/message-directive',
scope: false,
link: function (scope) {
scope.loaded = true;
}
};