Angular ng-hide / ng-show with promises!

HTML

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div ng-controller="TestController">
      <p ng-show="logShow(data)">
          I am shown ({{data}})!
    </p>
    <p ng-hide="logHide(promise)">
        I am hidden ({{promise}})!
    </p>
    <p id="log">
        <strong>Log</strong><br/>
    </p>
</div>

JavaScript

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

testApp.controller('TestController', ['$scope', '$q', function($scope, $q) {
    var $log = $('#log'),
        logMessage = function(message) {
            $log.append(message + '<br/>');
        };
    $scope.data = 'data',
    $scope.promise = $q.when('promise');
    $scope.logShow = function(data) {
        logMessage('ngShow evaluated value: ' + data);
        return true;
    };
    $scope.logHide = function(data) {
        logMessage('ngHide evaluated value: ' + data);
        return false;
    };
}]);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['testApp']);
});