Why Is My Angularjs Directive Causing Two-way Binding To Fail?

I can't figure out why when my directive is enabled on an element, the two-way binding fails. Consider this plunkr On the first removing the tooltip={{input1Error}} makes the inpu

Solution 1:

There is a documented issue with the scope of the controller. You can get around this by implementing the changes below.

Change your controller to this:

app.controller('ctrl1', ['$scope','$log', function($scope, $log) {
    $scope.model = {};
}]);

And the form to:

<formname="myForm"novalidate><divclass="form-group"><label>Input 1 *</label><inputclass="span2"name="input1id"type="email"ng-model="model.input1"tooltip="{{model.input1error}}"tooltip-placement="bottom"tooltip-trigger="openPopup"tooltip-trigger-on='openPopup'tooltip-trigger-off='closePopup'tooltip-show="myForm.input1id.$invalid"required
    /><pre>Input 1 is invalid: {{myForm.input1id.$invalid}}</pre><pre>Input 1 valid email: {{!myForm.input1id.$error.email}}</pre><pre>Input 1 error msg: {{model.input1error}}</pre></div><spanclass='error hidden'error-on="!myForm.input1id.$error.email"error-for='input1error'>Please enter a valid email</span><spanclass='error hidden'error-on="!myForm.input1id.$error.required"" error-for='input1error'>This field is required</span></form>