Take the 2-minute tour ×

What I'm trying to do is put the isolate scope 'pointers' directly onto the ngModel within the template. What I expected was for the scope variables to update automatically on the parent controller. What ended up happening was both variables are constantly being evaluated as undefined.

I'm uncertain why this isn't working as expected, because having a two-way bound isolate scope means that for each created name, that name is automatically gets put on the scope (e.g. I have inputA, so scope.inputA is create).

I created a log function that runs every time something in the input changes, and I output the input the results... I keep getting undefined for the isolate scope variables inputA and inputB. I'm perplexed; what have I done incorrectly?


<div ng-app="app">
    <div ng-controller="MyCtrl">
        <div my-directive input-A="input.inputA" input-B="input.inputB"></div>
    <!-- output input -->
    {{ input | json }}


.controller("MyCtrl", function($scope){ })
.directive("myDirective", function(){
   return {
        scope: {
            inputA: "=",
            inputB: "="
        template: 'inputA: <input ng-model="inputA" ng-change="log(inputA)"/><br/>'
                 +'inputB: <input ng-model="inputB" ng-change="log(inputB)"/>',
        link: function (scope, element, attrs) {
            scope.log = function (theInput) {
                console.log(theInput);     // outputs correctly
                console.log(scope.inputA); // outputs 'undefined'
                console.log(scope.inputB); // outputs 'undefined'
share|improve this question
The definition of your template is syntaxically wrong. Please escape the quotation marks ("), or use apostrophes (') for the delimitation of the string. –  Blackhole Nov 4 '13 at 15:56
Thanks for the catch. –  Andrew Allbright Nov 4 '13 at 16:22
add comment

1 Answer

I think the directive should be called as:

<div my-directive input-a="input.inputA" input-b="input.inputB"></div>

Note the lower-case input-a and input-b.

share|improve this answer
In addition, MyCrtl should probably initialize an empty input object: $scope.input = {} and the {{input | json}} interpolation should be inside the <div ng-controller="..." />. –  Kos Prov Nov 4 '13 at 23:45
add comment

Your Answer


