Showing angular expression at page load

angularIn my application I want to show a table data. I am showing a loading icon at first. At that time table will hidden. after data load that table will display. its working good. But some times some browsers showing angular expressions in table at page. After a 1/4 sec it will gone. But it shown 1/4 sec!!. I tried ng-show, ng-if, add a class,etc. everything failed. It is not fixed permanently. After that I tried with ng-cloak. It works!

I added the below code in my css file, and add a class to my table element.


[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;


<table  class="ng-cloak">

Angular dataTable multicolumn filter

angularIn my project i got a requirement that client need to search column wise with the default common search. I checked it in google, found column filter in footer row. But I need it in header itself. Based on that example created one.



<!DOCTYPE html>

    		<link rel="stylesheet" href="style/jquery.dataTables.css" />

  <body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl" class="code"  style="width: 500px">
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns">
                <input type="text" ng-model="" ng-change="searchData(,0)" ng-click="blockSorting($event)" /></th>
                <input type="text" ng-model="search.firstName" ng-change="searchData(search.firstName,1)"  ng-click="blockSorting($event)"/></th>
<tr ng-repeat="person in data">
<td>{{ }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<script src="script/jquery-1.10.1.min.js"></script>
    <script src="script/jquery.dataTables.js"></script>
    <script src=""></script>
    <script src="script/angular-resource.js"></script>
    <script  src="angular-datatables.min.js"></script>
    <script src="script.js"></script>



(function (angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
        controller('simpleCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
            $ = [{
                "id": 860,
                "firstName": "Superman",
                "lastName": "Yoda"
            }, {
                "id": 870,
                "firstName": "Foo",
                "lastName": "Whateveryournameis"
            }, {
                "id": 590,
                "firstName": "Toto",
                "lastName": "Titi"
            $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
            $scope.searchData = function (searchText, index) {
            $scope.$on('event:dataTableLoaded', function (event, loadedDT) {
                $scope.table = loadedDT.DataTable;
            $scope.blockSorting = function($event){

angular multi column filter

Bind angular scope to dynamically added html

angularSome times we need to integrate html contents to our angular application. some times we create contents from jQuery and integrate it to our application. like kendo UI in jQuery style, jQuery dataTables etc.
At that time the following snippet will useful.

<!DOCTYPE html>
<html lang="en">

    <script src=""></script>
    <script src=""></script>

<body ng-app="app">
<div ng-controller="ctrl" id="dvController">
        <button onclick="addTemplate1()">Add template 1</button>
        <button onclick="addTemplate2()">Add template 2</button>
<div id="dvContainer"></div>
                         function addTemplate1() {
                             var template = "<test-dir></test-dir>";

                         function addTemplate2() {
                             var template = "FirstName : {{FirstName}}
LastName : {{LastName}}";
                         function bindAngular() {
                             var $controllerElement = angular.element('#dvController');
                             var $appElement = angular.element('body');

                             // compiling and applying / digesting the scope.
                             $appElement.injector().invoke(function ($compile) {
                                 var scope = $controllerElement.scope();
                         angular.module('app', []).controller('ctrl', function ($scope) {
                             $scope.FirstName = "Musthaan";
                             $scope.LastName = "Majeed";
                         }).directive('testDir', function () {
                             return {
                                 template: "
<h1>From dir</h1>


Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite

One day i am just playing with angular with jQuery. At that time I got an error like

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite
My html looks like,


    <script src=""></script>
    <script src=""></script>

Because while initializing time angular doesn’t knows that there is jQuery.

Just swap the order and fix this issue.

    <script src=""></script>
    <script src=""></script>