To bind the data in the controller of the angularJS

Question

I have dynamically created the div element in the controller function of my angularjs, so in the div element want to bind the data but it is not binding it is showing the text as it is.

My code is:

function botCtrl($scope,$rootScope,$state,$window,$http)
{
    $scope.messageContent = '';

    //console.log("ID ::", $state.params.chat_state_id );
    $scope.submit = function(){
        console.log("Message ::", $scope.message);

        $scope.messageToShow = $scope.message;
        var newEle = angular.element("  <div class='message' ><a class='message-author' ng-model='author'> You </a>\
            <span class='message-content' ng-model='messageContent'>{{messageToShow}}\
        </span> </div>");
        var target = document.getElementById('messageDiv');
        angular.element(target).append(newEle);

        var data = {
            id: "775525ad-3c95-4ff4-aac7-5260466fc146",
            message: $scope.message
        }
            $scope.messageContent = $scope.message;
            $scope.value = 1;
            var url = "/api/chatBot/chatBot";
            $http.post(url,data)
                .success(function(data){
                    $scope.messageToShow = data.messageText;
                    console.log("Message ::", $scope.messageToShow);
                    var newEle = angular.element("<div class='message' ><a class='message-author' ng-model='author'> Bot </a>\
                    <span class='message-content' ng-model='messageContent'>{{messagetoShow}}\
                </span> </div>");
                var target = document.getElementById('messageDiv');
                angular.element(target).append(newEle);
                }) .error(function(){
                    console.log("ERROR in bot controller");
                })

    }


}

It is creating the div element in both the cases, but the data inside div of both the cases is coming {{messageToShow}} it is not binding the data.

So where I am doing wrong.

Thanks

Answer 1

I found a solution.

Code:

function botCtrl($scope,$rootScope,$state,$window,$http) {
    $scope.messageContent = '';

    //console.log("ID ::", $state.params.chat_state_id );
    $scope.submit = function() {
        console.log("Message ::", $scope.message);

        $scope.messageToShow = $scope.message;
        var newEle = angular.element("  <div class='message' ><a class='message-author' ng-model='author'> You </a>\
            <span class='message-content' ng-model='messageContent'>"+$scope.messageToShow+"\
        </span> </div>");
        var target = document.getElementById('messageDiv');
        angular.element(target).append(newEle);

        var data = {
            id: "775525ad-3c95-4ff4-aac7-5260466fc146",
            message: $scope.message
        }
            $scope.messageContent = $scope.message;
            $scope.value = 1;
            var url = "/api/chatBot/chatBot";
            $http.post(url,data)
                .success(function(data) {
                    $scope.messageToShow = data.messageText;
                    console.log("Message ::", $scope.messageToShow);
                    var newEle = angular.element("<div class='message' ><a class='message-author' ng-model='author'> Bot </a>\
                    <span class='message-content' ng-model='messageContent'>"+$scope.messageToShow+"\
                </span> </div>");
                var target = document.getElementById('messageDiv');
                angular.element(target).append(newEle);
                $scope.message = "";
                }) .error(function(){
                    console.log("ERROR in bot controller");
                })                
    } 
}