Marker disappears after reloading page: AngularJS

Question

I am facing a weird situation. On the first page load, the following code correctly shows a marker at the given coordinates and the map is correctly centered:

<div class="paddingtop">
    <map data-ng-model="mymapdetail" zoom="11" center="{{item.coordinates}}" style="heigth:375px">
        <marker position="[{{item.coordinates}}]" icon="./images/i.png" />
      <control name="overviewMap" opened="true" />      
    </map>
</div>

As you may note, in the first tag I do not include square brackets, which are included in the second tag (marker). This way, the marker shows up.

When I reload the page, or I come back to this page, the marker is not there anymore. More precisely, the map is correctly centered, but the marker is in a totally different position on the earth (in Africa rather than being in Miami or in other American cities).

If I include brackets on both (center and position) I get the map centered in Africa along with the marker (which means that something went wrong, as if I print the coordinates they locate some place in the US).

What's wrong with this code?

For the sake of completeness, I can say that this code works correctly:

<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]" style="heigth:375px">
    <div ng-repeat="item in items">
      <marker position="[{{item.coordinates}}]" icon="./images/i.png" on-click="showInfoWindow('mbar')" />          
        <info-window id="mbar" >
            <div>
                {{item.name}}
            </div>
        </info-window>
    </div>            
      <control name="overviewMap" opened="true" />
</map>` 

Answer 1

Removing the square brackets fixes the problem, but that introduces a new one. AngularJS and Maps API: stop prompting for computer's location