Angular Binding Whazzit ...

textbox in template not bound to data model

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://metroui.org.ua/js/metro.min.js?_=1414077722981"></script>
<div ng-controller="pageOneFormCtrl as page">
    
<p> The 'ProductName' text box in the 'Directive' fieldset and the textbox and label in the 'Controls' fieldset should all be in sync. </p>
    
    <fieldset><legend>Directive</legend>
    <label>Product Name</label><br>
        <input ng-model="page.data.productName" placeholder="{{page.placeholder}}" 
          ng-focus="page.data.productName=''">
            <button ng-click="page.data.productName=''">x</button>
    </fieldset>
    
    <fieldset><legend>Controls</legend>
        As long as this is working we  know that the model is successfully being bound to the pageOneFormCtrl scope
    <p><input type="text" ng-model="page.data.productName" /></p>
        <p>-- {{ page.data.productName }} --</p>
    </fieldset>
</div>

CSS

.btn-clear{ height: 20px; width: 20px; }
.btn-clear:before { content: 'X' }

JavaScript

(function(){
    
//
// service
var productFormServices = angular.module('productFormServices', []);
    productFormServices.service('productFormService', function () {
        var self      = this;
            self.data = {
            productName: 'Product X'
        };
    });

//
// directive
var metroDirectives = angular.module('metroDirectives', []);
    metroDirectives.directive('metroInputTransform', function ($compile) {
        
        function preLink($scope, element, attrs, controller) {
            console.log('PreLink');
        };
        function postLink($scope, element, attrs, controller) {
            console.log('PostLink');
            $(element).inputTransform();
        };
        
        return {
            priority: 100,
            compile: function (element, attrs) { 
                console.log("compile");
                
                return {
                    pre: preLink,
                    post: postLink
                };
            }
        };
    });

//
// controller
var productFormControllers = angular.module('productFormControllers', []);
    productFormControllers.controller('pageOneFormCtrl', ['productFormService',   function(formSvc){

	var self      = this;
	self.svc      = formSvc;
	self.data     = formSvc.data;
        
    this.placeholder = "product name";
}]);
//
// App
var myApp = angular.module('myApp', ['metroDirectives', 'productFormControllers', 'productFormServices']);
})();