How can I change popover placement in angular js depending screen size?
<p>Here is my Code in AngularJs Application.</p>

<pre><code>&lt;div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 myMoodTitle"&gt;
    &lt;span class="headText"&gt;My Mood&lt;/span&gt;
    &lt;a id="openMyMoodMsgBox" class="fa fa-question-circle     tooltipInfo" uib-popover-template="'chatMySettingsMoodPopover.html'" popover-class="chat-mysettings-mymood" ng-click="open('1')" popover-is-open="isOpen1"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>Above code,  I don't use <code>popover-placement</code> tag. I want to change this when screen resolution will be less than <strong>768px</strong> it will be shown <code>popover-placement</code> is bottom.
I am trying below this way but it doesn't work:</p>

<pre><code>var $iW = $(window).innerWidth();
if ($iW &lt; 768){
    $('.chat-mysettings-mymood').popover({placement: 'bottom'});
}
else{
    $('.chat-mysettings-mymood').popover({placement: 'right'});
};
</code></pre>

<p>Here, <code>chat-mysettings-mymood</code> is popover class name. I am trying to solve this problem but I am failed and this code does not work.</p>

<p>When I use <code>popover-placement="right"</code> tag beside <code>popover-class</code> tag it works but How can I control it depending my screen resolution?</p>