Back button and keeping filter value

HTML

<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>

<script>
    angular.directive('app:initFromView', function() {
        return ['$element', '$parse', function($element, $parse) {
            var currentScope = this;
            var modelExp = $element.attr('ng:model');
            var scopeGet = $parse(modelExp);
            var scopeSet = scopeGet.assign;
            scopeSet(currentScope, $element.val());        
        }];
    });
</script>

<div ng:app ng:controller="Ctrl">
    <p>Enter a value in the three field, then click on an external link (the JSFIDDLE logo) to leave the page, then use the browser back button. The value of the second field is lost, but the directive reloads the value of the third field.</p>
    
    <p class="field">HTML field without binding : 
       <input></p>
    
    <p class="field">Angular binded field:
       <input ng:model="filter1"> Filter is: ({{filter1}})</p>
    <p class="words"><span ng:repeat="word in words| filter:filter1">{{word}} </span></p>

    <p class="field">Angular binded field with directive: 
       <input ng:model="filter2" app:initFromView> Filter is: ({{filter2}})</p>
    <p class="words"><span ng:repeat="word in words| filter:filter2">{{word}} </span></p>
</div>

CSS

body {
    margin: 10px;
}
p.field {
    margin-top: 20px;
}
p.words {
    color: #888888;
    font-style: italic;
}

JavaScript

function Ctrl() {
    this.words = "A great way to get introduced to Angular is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.".split(" "); 
}