Summernote insert dynamic HTML

I have a variable called $scope.selectedTemplate. This variable contains HTML text and is essentially pulled from a select list filled with objects with this "content"text.

I am trying to then get the content to my summernote editor using a function that works when performing the first time, but not when the selectedTemplate variable is changed. When I use the same function (with a ng-bind-html) in a HTML p element the dynamic selectedTemplate content is shown.

This works:

<div class="shown">
    <p id="templateshow" ng-bind-html="SkipValidation(selectedTemplate)"></p>
</div>

This doesn't:

<div class="editor">
    <textarea class="form-control html-editor" id="templatecontent" name="content" ng-bind-html="SkipValidation(selectedTemplate)"  style="resize:none;"></textarea>
</div>

AngularJS:

 $scope.SkipValidation = function (value) {
    var decoded = $("<p/>").html(value).text();
    return $sce.trustAsHtml(decoded);
};

Summary

How can I, using the ng-bind-html and SkipValidation method, dynamically change the HTML formatted content of my Summernote editor?

Update 1:

Trying to handle a change of selectedTemplate using a watch is working with the following code:

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
       $("#templatecontent").summernote('code',"<b>Hello</b>");    
    }
});

However, this is manual and static text which outputs Hello.

Using this code, unfortunately, does not work:

$scope.$watch('selectedTemplate', function() {
    if($scope.selectedTemplate != ""){
        $("#templatecontent").summernote('code',$scope.SkipValidation($scope.selectedTemplate));    
    }
});

Solution

angular.module('app', [])

.controller('ctrl', ['$scope',
  function($scope) {
    $scope.sourceCodes = [
      {name: 'template 1', code: '<p>template 1<br></p>'},
      {name: 'template 2', code: '<p>template 2<br></p>'},
    ];
    
    $scope.$watch('selectedTemplate', function(n, o){
      if(n < 0 || n == undefined) return;
      $('#summernote').summernote('destroy');
      $('#summernote')
        .val($scope.sourceCodes[n].code)
        .summernote();
    })
      
    $('#summernote').summernote();
  }
])

select {
  margin: 30px !important;
  display: block;
}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <!-- include libraries(jQuery, bootstrap) -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <!-- include summernote css/js-->
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>

<body ng-controller="ctrl">
  <select ng-model="selectedTemplate">
    <option value="-1">Please Selecte Template</option>
    <option ng-repeat="code in sourceCodes" value="{{ $index }}">{{ code.name }}
      <option>
  </select>

  <textarea id="summernote" name=""></textarea>
</body>

</html>