first time load and bind kendo mvc wrapper controls on server side and once they get loaded into browser I will bind them with angular controller

See more:

AngularJs

Kendo

MVC5

I have main page which is working with kendo grid (see below code snippet) which contains some buttons in the toolbar template

<div kendo-grid
         k-data-source="sequenceGrid"
         k-columns='[   { field: "Prefix", title : "Sequence Prefix" },
                        { field: "Year" , title: "Year" },
                        { field: "SequenceNumber" , title: "Highest Number" },
                        { field: "SeqLength" , title: "Characters" }]'
         k-selectable="true"
         k-toolbar='sequenceGridToolbar'
         k-selectable="true"
         k-on-change="selectedSequence = data">

now I click one of them button, it invokes angular controller and angular controller invokes angular service to fetch data from server and at server side I have razor view (.cshtml) which contains kendo server-side-wrappers for mvc (below code)

@Html.Kendo().NumericTextBoxFor(m => m.Sequence.SequenceNumber).HtmlAttributes(new { k_ng_model = "sequenceAddViewModel.Sequence.SequenceNumber" })

Now what I am trying to do is, when I get back result (rendered html of my .cshtml view) to angular-controller I want to bind above kendo numeric textbox with my angular model and this is not happening. I for testing purposes conducted a test by adding below line of code for kendo-angular directives which is working as expected.

Note: kendo MVC wrapper and angular directives are on same .cshtml which is being dynamically loading via angular and the below code only working with angular.

<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="sequenceAddViewModel.Sequence.SequenceNumber" />

So my view is looks like

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Sequence.SequenceNumber)
    @Html.Kendo().NumericTextBoxFor(m => m.Sequence.SequenceNumber).HtmlAttributes(new { k_ng_model = "sequenceAddViewModel.Sequence.SequenceNumber" })
    @Html.ValidationMessageFor(m => m.Sequence.SequenceNumber)

    //added just for testing purposes
    <input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="sequenceAddViewModel.Sequence.SequenceNumber" />
    <br />

    <input type="button" ng-click="create()" value="Create" />
    <input type="button" ng-click="cancel()" value="Cancel" />
}

And my angular controller code is

angular.module('SequenceApp').controller('SequenceController', ['$scope', '$http', '$timeout', '$compile', '$rootScope', 'sequences', 'SequenceService', function SequenceController($Scope, $http, $timeout, $compile, $rootScope, sequences, SequenceService) {

    //kendo grid
    $Scope.sequenceGrid = sequences.Sequences;

    // grid toolbar template
    $Scope.sequenceGridToolbar = $("#sequenceGridToolbarTemplate").html();

    // selected sequence initialy empty object
    $Scope.selectedSequence = {};

    // sequence add view model initialy empty object
    $Scope.sequenceAddViewModel = {};

    


    // shows kendo window, loads contect view "SequenceService" into window 
    $Scope.showDialogeForAdd = function () {
        SequenceService.getSequenceAddTempalte().then(function (data) {
            $Scope.sequenceWindow.title("New Sequence");
            $Scope.sequenceWindow.content(data);

            $Scope.sequenceWindow.open();

            //console.log('applying scope')
            //$timeout(function () {
            //    $Scope.$apply();
            //}, 0);

            //console.log($Scope.sequenceAddViewModel);

        });
    }

    $rootScope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn) {
                fn();
            }
        } else {
            this.$apply(fn);
        }
    };

}]);

Now once again let me describe, what I am trying is to first time load and bind controls on server side and once they get loaded into browser I will bind them with angular controller for all other requests