PopUp Widget

Hey there,

is there anybody who could tell me, how I could implement a PopUp Widget? My first thougths are the following: I would create a template widget like this demo code:

<div class="row">
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'temperature'" /></span>Temperature</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'drop'" /></span>Humidity</div>
  <div class="col-xs-4"><span><widget-icon iconset="'smarthome-set'" icon="'thermostat'" /></span>Pressure</div>
</div>

<div class="row">
  <div class="col-xs-4"><span style="color: red; font-size: 28pt">{{itemValue('Outside_Temperature')}}°C</span></div>
  <div class="col-xs-4"><span style="color: cyan; font-size: 28pt">{{itemValue('Outside_Humidity')}}%</span></div>
  <div class="col-xs-4">
    <span style="color: green; font-size: 28pt">
		{{'%.02f' | sprintf:itemValue('Outside_Pressure')/10000}}<small style="font-size:8pt">MPa</small>
    </span>
  </div>
</div>

<table class="table">
  <tr>
    <td class="text-right">Sunrise:</td>
    <td><strong>{{itemValue('astro_sun_local_rise_start') | date:'HH:mm'}}</strong></td>
  </tr>
  <tr>
    <td class="text-right">Sunset:</td>
    <td><strong>{{itemValue('astro_sun_local_set_start') | date:'HH:mm'}}</strong></td>
  </tr>
  <tr>
    <td class="text-right">Season:</td>
    <td><strong>{{itemValue('astro_sun_local_season_name')}}</strong></td>
  </tr>
</table>

when the widget is clicked on I would like to show a modal dialog where I could set the temperature .

How could it implement angularjs code within the html example?

Greetings Dominic