how to use both angularJS and knockoutJS on same page

Question

my application developed with AngularJS but now i'm going to implement 'Mosaico Email Template Editor' (which is developed with KnockoutJS).. so How Can i Use both Angular and Knockout On Same Page.. any one can explain with sample code.. ?? tanx in advance

my sample code :

<script  type="text/javascript" src="js/core/controller/knockout.js"></script>
<script src="dist/vendor/jquery.min.js"></script>
<script type="text/javascript" src="js/core/controller/controller.js"></script>

    <div data-bind="foreach: templates">
          <div class="template template-xx" style="" data-bind="attr: { class: 'template template-'+name }">
            <div class="description" style="padding-bottom:5px"><b data-bind="text: name">xx</b>: <span data-bind="text: desc">xx</span></div>
            <a href="#" data-bind="click: $root.newEdit.bind(undefined, name), attr: { href: 'editor.html#templates/'+name+'/template-'+name+'.html' }">
              <img src="/images/full.png" width="100%" alt="xx" data-bind="attr: { src: 'templates/'+name+'/edres/_full.png' }">
            </a>
          </div>
        </div>


 *[and JS file below - controller.js][1]*

    var viewModel = 
          {
               templates: 
                [
                    {
                      name: 'versafix-1', desc: 'The versatile template'
                    },
                    {
                      name: 'tedc15', desc: 'The TEDC15 template'
                    }        
                ]

          };

    document.addEventListener('DOMContentLoaded',function(){
            ko.applyBindings(viewModel);
          });

First two image - what i expect but i get now right side one...i think knockout binding not working properly in my page: