Angularjs - Hide content until DOM loaded

Angularjs - Hide content until DOM loaded

I am having an issue in Angularjs where there is a flicker in my HTML
before my data comes back from the server.
Here is a video demonstrating the issue: http://youtu.be/husTG3dMFOM -
notice the #| and the gray area to the right.
I have tried ngCloak with no success (although ngCloak does prevent the
brackets from appearing as promised) and am wondering the best way to hide
content until the HTML has been populated by Angular.
I got it to work with this code in my controller:
var caseCtrl = function($scope, $http, $routeParams) {
$('#caseWrap').hide(); // hides when triggered using jQuery
var id = $routeParams.caseId;
$http({method: 'GET', url: '/v1/cases/' + id}).
success(function(data, status, headers, config) {
$scope.caseData = data;
$('#caseWrap').show(); // shows using jQuery after server
returns data
}).
error(function(data, status, headers, config) {
console.log('getCase Error', arguments);
});
}
...but I have heard time and time again not to manipulate the DOM from a
controller. My question is how can I achieve this using a directive? In
other words, how can I hide the element that a directive is attached to
until all content is loaded from the server?