The project is: A directive with isolated scope that renders a a form input field that can be configured via attributes in html.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app" class="container">
    <div ng-controller="myController">
      <h1></h1>

      
      The project is: A directive with isoalted scope that renders a a form input field that can be
      configured via attributes in html.
                  <br />
      <br />


      What is working:
                  <br />


      * Control of directive behavior through html attribute
      
                  <br />
      <br />


      What is not working:
                  <br />
      <br />


      * N/A
     
            <hr />

 
      Example: A form with one field.
      
            <div class="form-box">
        <form name="myForm" novalidate role="form">
          <br />


          Type here to change controller scopes value:   
                    <input ng-model="myObject.myPrimitive1" class="form-control" />

          
          Type here to change isolated scope value: 
                    <input-directive ng-model="myObject.myPrimitive1" input-name="TestField" input-placeholder="enter something"></input-directive>
          <br />
          <b>Value on the controller scope Primitive 1 is:</b>
 {{myObject.myPrimitive1}}
          
                    <hr />

          Testing a check box
                    <input-directive ng-model="myObject.myPrimitive2" input-type="checkbox" input-name="TestField2"></input-directive>
                    <b>Value on the controller scope Primitive 2 is:</b>
 {{myObject.myPrimitive2}}
 <br/>
 <b>Type of value on the controller scope Primitive 2 is:</b>
 {{myObject.myPrimitive2Type}}
        </form>
      </div>
    </div>
  </body>

</html>



'use strict';

var app = angular.module('app', []);

app.controller('myController',function($scope){
     
     $scope.myObject = {};
     
     $scope.myObject.myPrimitive1 = "Initial Value";
     $scope.myObject.myPrimitive2 = true;
     $scope.myObject.myPrimitive2Type = null;
     
     $scope.$watch("myObject.myPrimitive2", handleModelUpdate, true);
     
     function handleModelUpdate(newModel, oldModel) {
        console.log(newModel);
        console.log(typeof($scope.myObject.myPrimitive2));
        
        $scope.myObject.myPrimitive2Type = typeof($scope.myObject.myPrimitive2);
     }
     
   });
   
app.directive('inputDirective',function($compile){
     
     return {
        restrict: 'E',
        replace: true,
        scope: {
          inputName: '@',
          inputPlaceholder: '@',
          inputType: '@',
          ngModel: '=',
        },      
        templateUrl: "directiveTemplate.html",          
        //require: ['^form','ngModel'],
        require: ['^form'],
        link: function (scope, element, attrs, ctrls) {                
              scope.form = ctrls[0];
              //scope.ngModel = ctrls[1];
              
              //Variale to hold isolated scope value
              scope.inputBinding = ""; 
              
              //variable to control input required
              scope.required = false;
              
              // If attribute required exists
              if (attrs.required !== undefined) {                    
                  // ng-required takes a boolean which is read from this scope variable
                  scope.required = true;
              }
              
              // If attribute input-type exists
                if (attrs.inputType === undefined) {
                    scope.inputType = 'text';
                }
                else{
                    scope.inputType = attrs.inputType;                    
                }

              //Set up a watch on the isolated inputBinding scope variable
              //When it changes, update the external ngModel
              //scope.$watch('inputBinding', function () {
              //    scope.ngModel.$setViewValue(scope.inputBinding);
              //    console.log("Isolated scope changed: " + scope.inputBinding);
              //});
              
              //Pulls the external controller scope value in
              //scope.ngModel.$render = function() {
              //    scope.inputBinding = scope.ngModel.$viewValue;
              //};
              
              //Add the name attribute to the input field.
              //NOTE: The name attribute has also intentionally been omitted from the template HTML
              //NOTE: This is the key to making validation work as it will register the correct name on the form controller
              element.find("input").attr('name', scope.inputName);
              
              if (scope.inputType !== 'text')
                    element.find("input").attr('type', scope.inputType);
              
              //Compile the changes 
              //NOTE: This is what actually makes things bind up correctly.
              $compile(element)(scope);
              
              scope.$watch("ngModel", handleModelUpdate, true);
              
               function handleModelUpdate(newModel, oldModel) {
                 console.log(newModel);
               }
          }
     }
   });

/* Styles go here */


<div ng-class="{'has-error': form.{{inputName}}.$invalid}">
<input type="text" id="directiveInput" placeholder="{{inputPlaceholder}}"
       ng-model="ngModel" class="form-control" ng-required="required"/>
<br/>
Isolated Scope value of the input box: {{ngModel}}
</div>