I have a custom directive which loads a navigation block from a webservice call.
I am trying to click on one of those navigation links which I put a ng-click in.
I am trying to click on the link which should call the function called within the ng-click. That function should execute, but it is not.

Here is my routing

var cartangularPublicShoppingApp = angular.module('cartangularPublicShoppingApp', [

  'ngRoute',

  'CategoriesController',

  'CategoryServices',

  'CategoryNavigationServices',

  'MenuModule'

]);

cartangularPublicShoppingApp.config(['$routeProvider',

    function($routeProvider) {

        $routeProvider.

            when('/cart', {

                templateUrl: 'partials/public/cart.html',

                controller: 'CartCtrl'

            }).

            when('/categories/:categoryId', {

                templateUrl: 'partials/public/categories.html',

                controller: 'CategoriesController'

            }).

            otherwise({

                redirectTo: '/categories'

            });

    }]

);

Here is the custom directive

angular.module('MenuModule', [])

.directive('myCustomer', function() {

        return {

            restrict: 'E',

            templateUrl: './partials/public/customer.html',

            controller: function($scope, $sce, CategoryNavigationService) {



                var z = CategoryNavigationService.getCategoryNavigation().success(function(data){

                    $scope.categoryNavigation = data;

                    var navHTML = createCategoryNavigationBar(data);

                    var t = $sce.trustAsHtml(navHTML);

                    $scope.panes = t;



                }).error(function(data){



                        var error = Get confident, stupid!;

                        var t = $sce.trustAsHtml(error);

                        $scope.panes = t;

                });

                function createCategoryNavigationBar(categoryNavigation){

                     var test = ;

                    var categoryId;

                    var catNavArray = categoryNavigation.categoryNavigationArray;

                     for(categoryId in catNavArray){

                         var currentCategoryNavigation = categoryNavigation.categoryNavigationArray[categoryId];

                            var string =  '<li> <a href=javascript:void(0); name=categoryId ng-click=getProductsForCategory()>' + currentCategoryNavigation.categoryName + </a>;

                            test = test + string;



                         var count = 0;

                         var countingNavArr = currentCategoryNavigation.categoryNavigationArray;

                         for(var countingObject in countingNavArr){

                             count++;

                         }

                         if(count > 0){

                             var innerCategoryId;

                             test = test + <ul>;

                             for(innerCategoryId in currentCategoryNavigation.categoryNavigationArray){

                                 var innerCategoryNavigation = currentCategoryNavigation.categoryNavigationArray[innerCategoryId];

                                 var innerTest = createCategoryNavigationBar(innerCategoryNavigation);

                                 test = test + innerTest;

                             }

                             test = test + </ul>;

                         }

                         test = test + </li>;

                    }

                    test = '<ul id=menu>' + test + '</ul>';

                    return test;







                }



            }

        };

    });

Here is the controller that get's routed to my html fragment that I am showing the directive in.

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



categoriesControllers.controller('CategoriesController', ['$scope', '$routeParams' , '$location', 'CategoryService',

  function($scope, $routeParams, $location, CategoryService) {



      var categoryId = $routeParams.categoryId;

      getProductsByCategoryIdServiceCall(CategoryService, categoryId);



      $scope.getProductsForCategory = function(){

          var categoryId = 4;

          getProductsByCategoryIdServiceCall(CategoryService, categoryId);



      }

      function getProductsByCategoryIdServiceCall(CategoryService, categoryId){

          CategoryService.getProductsByCategoryId(categoryId).success(function(data){

              $scope.productsDTO = data;

              $scope.name = David M Pugh;

          }).error(function(data){

                  $scope.name = David Q Pugh;

                  $scope.name = data;

          });



      }



  }]);

Here is code fragment from categories.html that contains the custom directive:

   <div class=row-fluid>

        <div class=span12>

            <div class=navbar>

                <div class=navbar-inner>

                    <div class=container style=width: auto;>

                        <div class=span5></div>

                        <div class=span2>

                            <div id=currentCategoryDropBoxMenu>



                            </div>

                        </div>



                    </div>

                </div>

            </div>

        </div>

    </div>

    <br />

  <my-customer></my-customer>

    <br />

I have tried changing the javascript method called inside ng-click to be like:
ng-click=getProductsForCategory as well.

both results in the method getProductsForCategory not being called when the link is clicked

Does anyone have any idea what my problem is?

thanks,

David

EDITED INFO*
Hey folks, thanks for looking into this problem. It is still ongoing, but I added an extra test to my html fragment for my custom directive

<div ng-bind-html=panes></div>

<a href=javascript:void(0); ng-click=getProductsForCategory()>testing</a>

Before the only line was the first tag which was the div.
I added the 2nd line to see if it was perhaps the binding of the html directly to the div tag in the directive, or if there was a problem with the directive's configuration elsewhere.

The second tag I added should be a standard ng-click operation. my 2nd a href tag does
call the function getProductsForCategory().
So it does appear to be due to my binding of my html string to the div element for the directive.

The problem is that my navigation structure i am building can have infinite nested child elements (it's basically a suckerfish select box).

This means I will have to use recursion to map out every parent child navigation
structure...in a directive...