NGHide Not Effected When Value Changed in Directive

Question

I have a pair of elements that I want to hide or show depending on if photo data is available. On the initial page load this works fine, however, if a photo is added via the capturePhoto method in the directive I have to reload the page to have the elements show/hide as they should.

.html

<button ng-hide="measurement.photo != ''" class="btn btn-default" ng-click="capturePhoto(measurement)">Photo</button>
<img ng-show="measurement.photo != ''" id="{{measurement.__id}}" src="{{measurement.photo}}" width="100" height="100"/>

.js

.directive( 'sidingMeasurementGroup', function( $spawn, $measurementGroups, $compile, $projects, $filter, $photo )
{
return {
    scope:
    {
        group: "=",
        measurementTarget: "="
    },
    restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
    templateUrl: 'partials/directives/siding-measurement-group.html',
    transclude: true,
    replace:true,
    link: function( $scope, iElm, iAttrs, controller )
    {
        $scope.capturePhoto = function(measurement)
        {
            function fail( e )
            {
                $error.
                throw ( 'problem taking photo', e );
            }

            function success( imageURI )
            {
                cordova.exec(
                    function callback(data) {
                        measurement.photo = data.filePath;
                        var image = document.getElementById(measurement.__id);
                        image.src = null;
                        image.src = measurement.photo;
                    },
                    function errorHandler(err) {
                        alert('Error');
                    },
                    'CopyFiles',
                    'copyFileFromTmp',
                    [ imageURI ]
                );
            }   
            $photo.takePhoto( success, fail );
        }
    }
};

} )

If I log the value of measurement.photo after setting it, the correct value is shown, but on the HTML side the elements don't change their visibility. How do I make them react to the change that took place in my directive?

Answer 1

have you tried scope.$apply();

Edit to add: This worked perfectly, this is my resulting javascript code using scope.$apply()

.directive( 'sidingMeasurementGroup', function( $spawn, $measurementGroups, $compile, $projects, $filter, $photo )
{
return {
    scope:
    {
        group: "=",
        measurementTarget: "="
    },
    restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
    templateUrl: 'partials/directives/siding-measurement-group.html',
    transclude: true,
    replace:true,
    link: function( $scope, iElm, iAttrs, controller )
    {
        $scope.capturePhoto = function(measurement)
        {
            function fail( e )
            {
                $error.
                throw ( 'problem taking photo', e );
            }

            function success( imageURI )
            {
                cordova.exec(
                    function callback(data) {
                        $scope.$apply(function () {
                            $scope.photoTaken = true;
                            measurement.photo = data.filePath;
                            var image = document.getElementById(measurement.__id);
                            image.src = null;
                            image.src = measurement.photo;
                        });
                    },
                    function errorHandler(err) {
                        alert('Error');
                    },
                    'CopyFiles',
                    'copyFileFromTmp',
                    [ imageURI ]
                );
            }   
            $photo.takePhoto( success, fail );
        }