angularjs - ng-click doesn't work inside script

Question

angular.module('myApp').controller('institutionControl', function ($scope, $rootScope,Auth, $sessionStorage,$localStorage, $rootScope, $stateParams, $location, $http, $cookies,toastr,dataFactory,$ocLazyLoad,$interval) {

    if (!Auth.is_login_sim()) {
        $location.path('/home');
        return false;
    }
    $scope.user_auto_refreshHTML='';
    $scope.islogged=Auth.is_login_sim();
    $scope.user_auto_refresh='';
    console.log($scope.islogged);
    if( $scope.user_auto_refresh =='1'){
        $scope.getInstitutionFilling=$interval(function(){

        //alert('Hello');
        dataFactory.post_api('institution/institutionfilling_details',{'user':Auth.is_login_sim()}).then(function(results){
            //console.log(results);
            $scope.institutionfilling_details=results.institution_details;
            $scope.user_auto_refresh=results.user_auto_refresh;
            console.log($scope.user_auto_refresh);
            if($scope.user_auto_refresh == '0'){

                 $scope.user_auto_refreshHTML='<span class="off-t" data-ng-click="updateAutoRefresh(sumana)" ng-value="0">off</span>';
                 $('#auto_refresh').html($scope.user_auto_refreshHTML);

            }else{
                 $scope.user_auto_refreshHTML='  <span  class="on-t" data-ng-click="updateAutoRefresh(sumana)" ng-value="1">on</span>';
                  $('#auto_refresh').html($scope.user_auto_refreshHTML);
            }                
        });  
    },300000);
    }
  dataFactory.post_api('institution/institutionfilling_details',{'user':Auth.is_login_sim()}).then(function(results){
            //console.log(results);
            $scope.institutionfilling_details=results.institution_details;
            $scope.user_auto_refresh=results.user_auto_refresh;
            console.log($scope.user_auto_refresh);
            if($scope.user_auto_refresh == '0'){

                 $scope.user_auto_refreshHTML='<span class="off-t" data-ng-click="updateAutoRefresh(sumana)" ng-value="0">off</span>';
                  $('#auto_refresh').html($scope.user_auto_refreshHTML);

            }else{
                 $scope.user_auto_refreshHTML='  <span  class="on-t" data-ng-click="updateAutoRefresh(sumana)" ng-value="1">on</span>';
                  $('#auto_refresh').html($scope.user_auto_refreshHTML);
            }
         });
  $scope.updateAutoRefresh = function updateAutoRefresh($e){
    //$scope.value = val;
    console.log($e);
  };
});  

Answer 1

The element you're trying to append to the #auto_refresh should be compiled so that the angular assigns the respective click event to the element.

I've created a sample application of the same requirement, please check! Hope this helps you!

 var app = angular.module('sample', []); app.controller('samplecontroller', function($scope, $compile) { $scope.user_auto_refreshHTML = $compile('<span class="on-t" data-ng-click="updateAutoRefresh()" ng-value="1">on</span>')($scope); $('#auto_refresh').html($scope.user_auto_refreshHTML); $scope.updateAutoRefresh = function() { alert('i started working'); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="sample"> <div ng-controller="samplecontroller"> <div id="auto_refresh"></div> </div> </div>