title: Appending a div in angular material upon button click with content from a input using ng-bind
body: <p>I am using a input form and I want to append a flexbox containing the data from that input. Whenever the user enters the note in the input and clicks the button, a flexbox-item needs to be appended in the flexbox-container containing the text from that input. The flexbox does get appended upon the click but with no text. In the buttoncontroller function, you can see I am trying to append the flexbox div but the "usernote" is simply not displayed. What am I doing wrong?</p>
  
  <p>HTML-</p>
  
  <pre><code>   &lt;md-content layout-padding&gt;
          &lt;form name="projectForm" class="inputForm"&gt;
             &lt;div class="inputContainer" ng-cloak&gt;
             &lt;md-input-container class="md-block"&gt;
                &lt;label&gt;Add a note&lt;/label&gt;
                &lt;input required class="usernote" ng-model="usernote"&gt;
                &lt;/md-input-container&gt;
                &lt;md-input-container&gt;
                &lt;label&gt;Add Description&lt;/label&gt;
                &lt;input required class="userdescription" ng-model="userdescription"&gt;
                &lt;/md-input-container&gt;
                &lt;md-checkbox ng-model="data.cb1" aria-label="Category1"&gt;
          Category1
        &lt;/md-checkbox&gt;
        &lt;md-checkbox ng-model="data.cb1" aria-label="Category2"&gt;
          Category2
        &lt;/md-checkbox&gt;
      &lt;div class="buttondemo" ng-controller="buttonController"&gt;
  &lt;md-button ng-click="addnoteflex()" class="md-fab" aria-label="add"&gt;
                &lt;md-icon class="material-icons"&gt;add&lt;/md-icon&gt;
             &lt;/md-button&gt;               
    &lt;/div&gt;
       &lt;/div&gt;&lt;/form&gt;
  </code></pre>
  
  <p>JS-</p>
  
  <pre><code>angular
          .module('firstApplication', ['ngMaterial'])
          .controller('buttonController', buttonController)
          .controller('sideNavController',sideNavController)
          .controller('speedDialController', speedDialController);
       function sideNavController ($scope, $mdSidenav) {
           $scope.openLeftMenu = function() {
             $mdSidenav('left').toggle();
           };
       }  
     function buttonController ($scope) {
          $scope.title1 = 'Button';
          $scope.title4 = 'Warn';
          $scope.isDisabled = true;
          $scope.googleUrl = 'http://google.com';
          $scope.addnoteflex=function()
          {
          var myflexbox = angular.element(document.querySelector( '.flex-container' ));
  
          myflexbox.append("&lt;div  ng-bind='usernote' class=\"flex-item\"  layout=\"row\" layout-margin&gt; &lt;/div&gt;");
          }
       }  
       function speedDialController ($scope) {
          this.topDirections = ['left', 'up'];
          this.bottomDirections = ['down', 'right'];
          this.isOpen = false;
          this.availableModes = ['md-fling', 'md-scale'];
          this.selectedMode = 'md-scale';
          this.availableDirections = ['up', 'down', 'left', 'right'];
          this.selectedDirection = 'down';
       }      
  </code></pre>