Is there a way to run my angularJS app as a polymer component?

Finally I found a solution myself. You just need to load the angular app into a specific element to avoid conflicts if more than one app is running in it. And implemented the ajax call script.

Example:

<link rel="import" href="../polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="my-element">
<template>
    <div id="my-app">   
        <ui-view></ui-view>
    </div>
</template>
<!-- Registers custom element -->
<script>
Polymer({
    is: 'my-element',

    // Fires when an instance of the element is created
    created: function() {},

    // Fires when the local DOM has been fully prepared
    ready: function() {
            $.getScript('./app/may-ng-app.min.js');
    },

    // Fires when the element was inserted into the document
    attached: function() {},

    // Fires when the element was removed from the document
    detached: function() {},

    // Fires when an attribute was added, removed, or updated
    attributeChanged: function(name, type) {}
});
</script>
</dom-module>

      

        
        
        
      

    

In this case angular will start loading the app in the element my-app

. And we can deploy separately the angular app and hold it in a polymer container. This gives us flexibility and page loading speed.