title: How can I change popover placement in angular js depending screen size?
body: <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>