Error: [$rootScope:inprog] $apply already in progress

Question

I just tried to use 'ngTagsInput' in my angular app and the tags in the app are running fine,but sumultaneously its throwing the error in the console.Its not affecting my UI flow but yes errors are logging in the console.Why the cause and solution for this error. Error:

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.2.6/$rootScope/inprog?p0=%24apply......

this is order how my files are getting downloaded for browser

  <script type="text/javascript" src="js/ui-bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular-resource.js"></script>
    <script type="text/javascript" src="js/ui-bootstrap-tpls.js"></script>
    <script src="js/angular-animate.min.js" ></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.4/toaster.js"></script>
    <script type="text/javascript" src="js/angular-datatables.js"></script>
    <script type="text/javascript" src="js/loading-bar.js"></script>
    <script type="text/javascript" src="js/timer.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
    <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/angular-sanitize.js"></script>
    <script type="text/javascript" src="../bower_components/angular-dragdrop/src/angular-dragdrop.min.js"></script>
    <script type="text/javascript" src="../bower_components/ng-tags-input/ng-tags-input.js"></script>

and my view

<tags-input ng-model="email_details.cc"></tags-input>

my controller

$scope.emailTemplates=[{
    'id'        :1,
    'cc'        :['developer@earning.com','a@rning.com'],
    'bcc'       :['ak@learning.com'],
    'subject'   :'1testing common template testing common template ' ,
    'created_on':'2015-07-04 16:04:02',
    'body'      :'body<b>hi'

},{
    'id'        :2,
    'cc'        :['cc2@rning.com','cc2@email.com'],
    'bcc'       :['bcc@email.com','bcc2@email.com'],
    'subject'   :'2testing common template testing common template ' ,
    'created_on':'2015-07-04 16:04:02',
    'body'      :'<p>a</p>'

}
]

There are the self defined directives where in i am using scope.watch/.eval/.apply

    .directive("myDatepicker", function () {
      return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ngModelCtrl) {
          var updateModel = function (dateText) {
            scope.$apply(function () {
              ngModelCtrl.$setViewValue(dateText);
            });
          };
          var options = {
            dateFormat: "yy/mm/dd",
            onSelect: function (dateText) {
              updateModel(dateText);
            }
          };
          elem.datepicker(options);
        }
      }
    });
.directive("ngRandomClass", function () {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            ngClasses: "="
        },
        link: function (scope, elem, attr) {            

            //Add random background class to selected element
            elem.addClass(scope.ngClasses[Math.floor(Math.random() * (scope.ngClasses.length))]);
        }
    }
})
.directive('compile', function($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        var result = element.html(value);
        //console.log(scope.$parent);
        $compile(element.contents())(scope.$parent.$parent);
      }
    );
  };
})