NGHide Not Effected When Value Changed in Directive - angularjs

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 );
}