What's wrong? My ons-popover doesn't show up [AngularJS]

naufal17

So, I tried to make an offline app using Onsen UI and AngularJS
I know AngularJs is already stop developed, but because the application that I want to make is offline base, so I choose to use it still

Anw, back to the topic, I have already tried to follow the instruction of this ons-popover documentation, but it’s not working
Because I create an application that has few pages, so I use a template tag for every page and the popover as well

Here’s my HTML script looks like

<template id="main_page.html">
  <ons-page ng-controller="appCtrl">
    <ons-toolbar>
      My App
    </ons-toolbar>

    <div class="main">
      <ons-button id="target_button">Button</ons-button>
    </div>
  </ons-page>
</template>

<template id="popover.html">
  <ons-popover>
    This popover is defined as a template.
  </ons-popover>
</template>

And here is the script inside of my controller

app.controller("appCtrl", function($scope){
  ons.createElement("popover.html", {parentScope: $scope, append: true})
   .then(function(popover){
     popover.show("#target_button"); // the target where I want the popover to show at
   })
})

As you can see on my controller above, I use the ons-button id which is button_target as a target where I want the popover to show at
And the error that I got just like this

Error: [Onsen UI] Invalid target type or undefined
    at vi.throw (onsenui.min.js:2:62668)
    at HTMLElement.value (onsenui.min.js:2:236643)
    at t.<computed> [as show] (angular-onsenui.min.js:4:43505)
    at ctrl.js:93:11

It’s said that the target is undefined
So I tried to add and change a few lines just like this

ons.createElement("popover.html", {parentScope: $scope, append: true})
   .then(function(popover){
     var target = document.getElementById("button_target");
     popover.show("target"); // the target where I want the popover to show at
   })

But nothing changed, is there something that I missed?