How to change one-time binding data in AngularJS?

Question

I have a div which show details like mobilenumber, name etc. like {{::mobilenumber}}, {{::name}}

In that div, there is a button that renders the same values in the new form

By using the button in the form, the user can change the values but in the div where I am showing details, values don't change after clicking on the button

<form ng-submit="form.$valid && saveDetails()">
  <input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50"  ng-trim="true" autocomplete="off" required >
  <span><!-- Mobile Number required --></span>

  <input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber"                        ng-model="address.mobilenumber" ng-minlength="10" maxlength="12"  ng-trim="true" autocomplete="off" required>
  <span><!-- Mobile Number required --></span>

  <button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>

Do I want to use one-way binding only?

I tried using $scope.$broadcast('$$rebind:refresh'); but still values don't change.

Any help or guidance would be very helpful for me.

Answer 1

If you really want to keep some sort of one-way-binding...

What you could do, is just use two way binding but with a dataset in between. It gives some overhead but it is a possible solution to your problem. In order to update the view, you just update the copied data. You can control when the data in the view is updated.

Answer 2

When you use interpolation {{mobilenumber}} in your html, angular creates a watcher that watches the property mobilenumber on a scope:

$scope.$watch('mobilenumber', function() {
   // update DOM
});

Whenever the value changes, DOM is updated.

However, if you use one time binding {{:mobilenumber}} , as soon as your callback receives truthy value, angular removes the watcher:

var unwatch = $scope.$watch('mobilenumber', function() {
   if (value) {
     // update DOM
     unwatch();
   }
);

And since there is no more watcher for mobilenumber , whenever you update values on the scope inside your saveDetails() method, the callback is not triggered and DOM is not updated.

If you're planning on updating values constantly, you should not use one time binding . Use regular bindings:

<div>{{mobilenumber}}</div>