javascript - angular-js change content on link -

at moment have this:

html-script

<div ng-app="home" ng-controller="customersctrl">      <div ng-bind-html="home" id="content">{{content}}</div> </div> 

js-script

angular.module('home', []).controller('customersctrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {     $http.get("http://www.example.de/home/").success(function (response) {         document.getelementbyid("content").innerhtml = response;     }); }]); 

it works fine, want change content on click on a-tag link link this:

<a href="#home/">home</a> | <a href="#user/">user</a> 

can tell me how can this?

for simple function calling make text changes, recommend using ng-click="" rather <a href="#"></a> since haveing # route changes in angularjs.

according explanation assuming pulling html codes other website , angular won't work. ng-bind-html need 'sanitize' since consider unsafe ng-bind html code.

nonetheless, here code think work you

html:

<div ng-app="myapp" ng-controller="customersctrl" ng-init="content='test'">      <div ng-bind-html="content | sanitize"></div>     <a ng-click="changecontent('home')">home</a> | <a ng-click="changecontent('user')">user</a> </div> 

javascript:

angular.module('myapp', [])     .filter('sanitize', ['$sce', function($sce){         return function(text) {             return $sce.trustashtml(text);         };     }])      .controller('customersctrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {         $scope.changecontent = changecontent;          function changecontent (content){             if(content ==='home'){                 $http.get("http://www.example.de/home/").success(function (response) {                     $scope.content = response;                 });                         } else {                 // ......             }         }     }]); 

edit: spacing , typos