title: Using ngSanitize want to add jQuery onClick() with Angular data binding code
body: <p>I have created some search functionality with Angular js. </p>
  
  <p>showing the HTML content using <strong>ngSanitize</strong>. Now in the HTML data I want to use jQuery onClick(). </p>
  
  <p>I tried a lot but no luck something is wrong:</p>
  
  <p>Below is the Angular controls' code:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngSanitize']);
  
  myApp.factory('Items', ['$http', function($http){
    return {
      get: function(callback){
        $http.get('assets/script/items.json').success(function(data){
          callback(data);
        })
      }
    }
  }]);
  
  myApp.factory('Categories', ['$http', function($http){
    return {
      get: function(callback){
        $http.get('assets/script/categories.json').success(function(data){
          callback(data);
        })
      }
    }
  }]);
  
  // Config and Routes 
  myApp.config(function($routeProvider){
    $routeProvider
          .when('/', {
                  templateUrl:"home.html"
          })
          .when('/item/:id', {
                  templateUrl:"item.html"
          })
  })
  
  myApp.controller('headerController', function($scope, $location) {
    $scope.goHome = function () {
      $location.path('/');
    };
  })
  
  
  
  function controller($scope) {
    $scope.greeting = 'hello';
  }
  
  // Controllers
  myApp.controller('ItemController', function($scope, $route, $location, $http, Items){
  
    Items.get(function(response){
      $scope.items = response;
    });
  
    // Update this value dynamically - onclick
    $scope.filters = "food";
  
    $scope.viewDetail = function(item) {
          $location.path('/item/' + item.id);
      }
  
  })  
  
  
  myApp.controller('ListController', function($scope, $route, $location, $http, Categories){
  
    $scope.sendCategory = function(category) {
      // How can I pass this value to ItemController?
       $scope.search =category.name;
    };
  
     $scope.orderProp='title';
  
      $scope.tab = function (tabIndex) {
       //Sort by date
        if (tabIndex == 1){
          //alert(tabIndex);
          $scope.orderProp='date';
  
        }   
        //Sort by views 
        if (tabIndex == 2){
          $scope.orderProp = 'views';
        }
  
     };
  
     $scope.sort = function(item) {
         if (  $scope.orderProp == 'date') {
              return new Date(item.date);
          }
          return item[$scope.orderProp];
     }
  
  })  
  
  
  myApp.controller('CategoryController', function($scope, $route, $location, $http, Categories){
  
    Categories.get(function(response){
      $scope.categories = response;
    });
  
  
  })  
  
  myApp.controller("tabsController", function ($scope) {
  
     $scope.orderProp = 'date';
  
  })
  
  myApp.controller('ItemDetailController', function($scope, $route, $location, $http, Items){
  
      $scope.goHome = function () {
          $location.path('/');
      };
  
      Items.get(function(response){
      $scope.items = response; 
  
      if ($route.current.params.id) {
        angular.forEach($scope.items, function (v, k) {
          if (v.id == $route.current.params.id) {
            $scope.currItem = $scope.items[k];
            return false;
          }
        });
      }
    });
  })
  </code></pre>
  
  <p>jSon Data sample:</p>
  
  <pre><code>[
    {
      "id": 1,
      "title": "My Title",
      "src": "assets/images/myPic.jpg",
      "description": "&lt;p&gt;Hello p tag&lt;/p&gt;&lt;h2&gt;heading&lt;/h2&gt;&lt;div&gt;Content&lt;/div&gt;",
      "organization": "My Organization",
      "currentrole": "My Current Role"        
    },
      {
      "id": 2,
      "title": "My Title",
      "src": "assets/images/myPic2.jpg",
      "description": "&lt;p&gt;Hello p tag 2&lt;/p&gt;&lt;h2&gt;heading2&lt;/h2&gt;&lt;div&gt;Content 2&lt;/div&gt;",
      "organization": "My Organization",
      "currentrole": "My Current Role"        
    }
  ]
  </code></pre>
  
  <p>Please help! Thanks in advance.</p>