how to binding one way angular and binding again when model change?

Question

There are any solution or angular plug-in to do binding one way and binding again when model is change? Now I'm using plug-in bind-once , But it just binding on first time and then it destroy watcher. Example:

    <div bindonce="model"><span bo-bind="model.title"></span></div>

Answer 1

Angular already does this for you

<div><span ng-bind="model.title"></span></div>

or

<div><span>{{model.title}}</span></div>

Answer 2

how you can do it is: re-redner(ng-if) the page on change of certain variable. what would happen is, the dom would be removed, and added again, which it is being added again : angular should bind the variable to its current value, so this way you get to keep bind-once and also update the value as per your need.

only caveat is, you would need an indicator for DOM on when to reload.

you can use the reload directive below(which I am using in my app):

csapp.directive("csReloadOn", ["$timeout", "Logger", function ($timeout, logManager) {

    var $log = logManager.getInstance("csReloadOn");

    var getTemplate = function () {
        return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>';
    };

    var linkFunction = function (scope, element, attrs) {
        scope.doRefreshPageOnModeChange = true;

        scope.$watch(attrs.csReloadOn, function (newVal, oldVal) {
            if (newVal === oldVal) return;
            $log.info("changed mode from : " + oldVal + ", to : " + newVal);
            scope.doRefreshPageOnModeChange = false;
            $timeout(function () { scope.doRefreshPageOnModeChange = true; }, 100);
        });
    };

    return {
        restrict: 'A',
        transclude: true,
        template: getTemplate,
        link: linkFunction
    };
}]);