Angular html not loading properly

Question

Sorry if this has a really obvious answer, I'm fairly new to Angular JS and this is something that I have been stuck on for an annoyingly long time.

To give you a bit of background, I am calling ng-repeat on a directive as follows:

<div ng-controller = 'salesctrl'>
 <salecell ng-repeat = "kpi in kpis" kpi ="kpi"></salecell>
</div>

With the directive being described as follows:

.directive("salecell", function(){

    return{
        templateUrl: "sale-cell-template.html" ,
        restrict: 'E',  
        scope: {
            kpi: '='
        },
        link: function(scope){
            return scope;
        },

        controller: function($scope){

            if(typeof $scope.kpi != 'undefined'){

                $scope.kpi.value = 0;
                $scope.increment = function(){
                    $scope.kpi.value++;
                }

                $scope.decrement = function(){
                    if($scope.kpi.value != 0){
                        $scope.kpi.value--;
                    }
                }
            }

        }

    };
})

and the attached controller:

    .controller("salesctrl", function($scope, $rootScope, SalesSvc){
    SalesSvc.query().$promise.then(function(data){
        $scope.kpis = data;
    });

    $scope.submit = function(){
        SalesSvc.save($scope.kpis).$promise.then(function(){
            for(var i = 0; i < $scope.kpis.length; i++){
                $scope.kpis[i].value = 0;
            }
        });
        $rootScope.$emit('salecreate');

    }
})

The issue that I am having is that, regardless of the contents of my associated template, only the outer element is being rendered. For example if I have:

<tr>
<div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
<div ng-show="!kpi.dollar" class="col-md-6">
    <div id="spinner4">
        <div class="input-group" style="width:150px;">
            <div class="spinner-buttons input-group-btn">
                <button ng-click="decrement()" type="button" class="btn spinner-up btn-warning">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
            <input ng-model="kpi.value" type="text" class="spinner-input form-control" maxlength="3" >
            <div class="spinner-buttons input-group-btn">
                <button ng-click="increment()" type="button" class="btn spinner-down btn-primary">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<div ng-show="kpi.dollar" class="col-md-6">
    <div class="input-group m-bot15" style="width: 150px;">
        <span class="input-group-addon">$</span>
        <input ng-model="kpi.value" type="text" class="form-control">
    </div>
</div>

Nothing will load on the page, and likewise, if I have:

<tr>
  <h1> Hello World! </h1>
</tr> 

Nothing is loaded either.

Things I have already checked: -I have made sure that both $scope.kpis and $scope.kpi are defined -I have ensured that the template is actually being called (both by inspecting elements and by calling a console.log from within the template) -A bit of searching around suggested that it might be an error within the template, but this seems strange given that it doesn't work even with a near-empty template.

The only other thing that I can think to add is that when I was using console.log in the template that was visible in the element inspector (Chrome), but nothing else has been.

Let me know if you need anything else, and once again I hope this isn't something really stupid that I have missed.

Answer 1

Ensure that the content inside the table are wrapped in <td> tags. Currently they are directly inside <tr> tags and is invalid HTML.

<tr>
    <td>
        <div class="col-md-6"> <label class="control-label">{{kpi.title}}</label></div>
        ...
    </td>
</tr>