How can i render DOM object from angularjs?

Question

I am making DOM object through javascript and i want it to render it through angularjs but it display like [object HTMLDivElement]

but in browser console its

but it renders like

.directive('attachmentify', [

function() {
    return {
        restrict: 'A',
        scope: {
            item: "@filename"
        },
        template: "<div ng-bind-html='content'></div>",
        compile: function(iElement, iAttrs) {
            return function($scope, element, attr) {
                var file = $scope.item;

                // console.log
                // $scope.file =file;
            }
        },
        controller: function($scope) {
            var img = ['jpg', 'jpeg', 'png'];
            var c = 0;
            img.forEach(function(element, index) {
                if ($scope.item.endsWith(element)) c++;
            });
            if (c) {
                var div = document.createElement('div');
                div.setAttribute('name', 'samundra')
                div.innerHTML = "ram"
            } else {
                var div = document.createElement('div');
                div.setAttribute('name', 'ramundra')
                div.innerHTML = "sam"
            }

            $scope.content = div; 
            console.log(div);
        }
    }
}

])

Answer 1

In your controller instead of assign DOM element instance, You can set $scope.content to html

$scope.content="<div name='ramundra'>ram></div>";