How to access a DIV's innerHTML onclick (ng-click) a button in Angular JS

Question

I have a simple question. I have a <div> and a <button>. I want to access the inner markup of the <div> inside the function I wire with ng-click. How can I do this without jQuery?

<div id = text-entry-view contenteditable="true"></div>

<button class="btn btn-primary btn-block" ng-click = 'sendMsg()'>Send</button>

app.controller('ActiveController', ['$scope', 'contact', '$ManageLoggedInUsername', function($scope, contact, $ManageLoggedInUsername){
    $scope.loggedInUsername = $ManageLoggedInUsername.getUsername();
    $scope.contact = contact;
    $scope.sendMsg = function(){
        //console.log("MSG :: " + <div#text-entry-view.innerHTML>);
    }
}]);

So I want the content of the <div> inside the sendMSG function. Kindly help.

Answer 1

Why not just use plain JS in this case? Observe the following...

$scope.sendMsg = function() {
    var markup = document.getElementById('text-entry-view').innerHTML;
    console.log('MSG :: ' + markup);
}

JSFiddle Link - demo

---

You can also wrap your selector with angular.element() for access to the AngularJS jqLite api e.g.

var markup = angular.element(document.getElementById('text-entry-view')).html()