AngularJS Directive template not displaying HTML

Question

I have a fiddle at http://jsfiddle.net/skwidgets/w2X9m/3/ to build out a group of check boxes. It works just as desired in the prototype and I can even include more then one group and they run independently. As I was satisfied I add the code to the app that I am building and the html in the template: '<>' of the directive does not appear. the model data that is in the handle bars in the template does how ever. I cannot seam to figure out why as there are not errors.

I also have this plunker that shows the code working http://plnkr.co/edit/JE5dRDU4VyGd0UAbCtNu?p=preview

<div class="sqs" >
        <pre>
            {{survey | json}}
        </pre>

        <suvey-checkbox ng-model="Q1" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
        </suvey-checkbox>

        <suvey-checkbox ng-model="Q2" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
        </suvey-checkbox>
</div>

And

var app = angular.module("app", []);
app.run(function($rootScope){
$rootScope.survey = [];
});

app.directive('suveyCheckbox', function ($rootScope) {
return {
    restrict: 'E',
    require: '^ngModel',
    scope: {
        ngModel: '@'
    },
    template: '{{ngModel}}<br /><label ng-repeat="surveyQuestion in      surveyQuestions" class="checkbox">' +
                '<input data-role="none" type="checkbox" name="selectedExclusion[]" value="{{surveyQuestion.value}}"' + 
                'ng-checked="surveyAnswers.indexOf(surveyQuestion.value) > -1" ng-click="togglesurveyAnswers(surveyQuestion.value)"> ' +
                '{{surveyQuestion.name}} <br /></label>{{surveyAnswers}}',
    link: function (scope, elem, attr) {
        // selected exclusion
        scope.surveyAnswers = [];

        // toggle surveyAnswers for a given answer by name
        scope.togglesurveyAnswers = function togglesurveyAnswers(surveyQuestion) {
            var idx = scope.surveyAnswers.indexOf(surveyQuestion);

            // is currently selected
            if (idx > -1) {
                scope.surveyAnswers.splice(idx, 1);
            }
            // is newly selected
                else {
                scope.surveyAnswers.push(surveyQuestion);
            }
        };
        $rootScope.survey.push(scope.surveyAnswers);
    }
}
});

I took the code from the prototype in the fiddler that is linked and that is not working for some reason.

Answer 1

The code will not work in newer versions of angular. In previous versions there was a bug that caused isolate scope to not be really isolate and leak out to other directives.

In angular 1.2.x isolate scope is truly isolate. This means that you cannot use anything in your template unless the directive either put it manually into the scope or it is included in the isolate scope definition (eg scope: { myVar: '='} )

For example, in your case your template cannot access surveyQuestions because it was not defined in the private scope (ng-init will not be able to access the isolate scope inside of your surveyCheckbox directive.

If you want to be able to use surveyQuestions in your directive's template you need to pass it in to the isolate scope:

<survey-checkbox questions="surveyQuestions" ng-model="bedsideQ2" ng-init="surveyQuestions = [
                { 'value':'value1', 'name': 'The unit' }, 
                { 'value': 'value2', 'name': 'Patient Threw Up'}, 
                { 'value':'value3', 'name': 'Unsafe for children' }, 
                { 'value':'value4', 'name': 'Actively dying, reached life goal'}]">
</survey-checkbox>

And then add it to your isolate scope:

scope: {
   ngModel: '@',
   surveyQuestions: '=questions'
}