Ajax calls in Magento Admin Custom module - angularjs

Question

I successfully created a custom admin module and loaded successfully in the menu and rendered phtml file successfully.
Then i tried to load some dummy data via ajax using angularJS in same admin module when clicking a button, but the ajax call returns the html content of dashboard of magento admin.
I followed this link
Following is the code for controller
<?php
namespace DVendor\DemoModule\Controller\Adminhtml\DemoPart;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\Controller\Result\JsonFactory;
class Index extends \Magento\Backend\App\Action
{
/**
* #var \Magento\Framework\View\Result\PageFactory
*/
protected $resultPageFactory;
protected $jsonPageFactory;
public function __construct(Context $context,PageFactory $resultPageFactory,JsonFactory $jsonPageFactory){
$this->resultPageFactory = $resultPageFactory;
$this->jsonPageFactory = $jsonPageFactory;
parent::__construct($context);
}
public function execute()
{
if($this->getRequest()->isAjax()){
$result = $this->jsonPageFactory->create();
$test=array(
'Firstname' => 'What is your firstname',
'Email' => 'What is your emailId',
'Lastname' => 'What is your lastname',
'Country' => 'Your Country'
);
return $result->setData($test);
}
else{
return $resultPage = $this->resultPageFactory->create();
}
}
}
?>
Following is the JS Code used in phtml file
$http({
method:'POST',
url:'<?php echo $this->getUrl('demomodule/demopart'); ?>',
//data:$.param({'limit':$scope.definedlimits.value}),
headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).then(function(response) {
var data = response.data;
console.log(data);
},function(response){
console.log(response.data);
});