I am not able to click on button in protractor - angularjs

Question

Html code
<button type="button" ng-click="submitPosition($event, true);navigate($event,'/#/project')" class="btn btn-main" name="submit">CREATE POSITION AND AUTOSOURCE</button>
My code.
Two buttons have same class name so am using filter.
element.all(by.css('button.btn.btn-main')).filter(function(button,index){
return index == 1;
}).each(function(button){
button.click();
});
I am getting this error
UnknownError: unknown error: Element is not clickable at point (1049, 162). Other element would receive the click: <ul class="modal-breadcrumb list-unstyled block">...</ul>
(Session info: chrome=43.0.2357.132)
Please help me.

Answer 1

Based on the error, it looks like you've got a modal blocking your click. Not seeing the rest of the code, it's hard to say, but you'll need to get around that. That said, the overall issue could be your locator strategy. Using filter here is overboard, and perhaps trying to clicking the wrong thing?
I would try:
element(by.cssContainingText('button.btn.btn-main', 'CREATE POSITION AND AUTOSOURCE'));
or
$$('button.btn.btn-main').get(1); // assuming index 1 is the button you're after
or if it's the only submit:
$('button[name="submit"]');

Answer 2

This may result due to the following reason ,
The button you want to click on is at the bottom of the page(not visible on the page).
you have to scroll down a bit to expose the button in our browser.Then you can click on it.
You can use mouseMove() to scroll to element first:
browser.actions().mouseMove(btnSave).click();
or
use browser.executeScript() function to do the scrolling:
browser.executeScript('window.scrollTo(0,document.body.scrollHeight);');
you should give a specific id to your button and use the by id to click
element(by.id('buttonId')).click();

Answer 3

I'm not sure if the modal eventually goes away? or if you have to click on something else for the modal to go away but I've found using the expected conditions to be helpful
var button = element.all(by.css('button.btn.btn-main')).first();
var IsClickable = EC.elementToBeClickable(button);
browser.wait(IsClickable, 5000, "Failed to click the button").then(function() {
button.click();
});