Country name:

   {{myForm.msg}}

List of country names in the database:
sorted alphabetically sorted by length unsorted

• {{country.country_name | myfilter}}    {{myForm.sel_msg}}

A very simple summation spreadsheet:

The spreadsheet is initially loaded with data that are read from a csv file.
The data can also be saved to the same file. A file is no database though.
The csv file gets read and written entirely.
With AngularJS is quite easy to make it possible to dynamically add/remove rows/columns.

Add row    Remove row   total

Add column    Remove column    Save    {{myForm.saved_msg}}

With a custom directive jQuery UI's datepicker is implemented here.
In the html script this custom directive has the form of a new segment: <my-datepicker></my-datepicker>
Now the date can be accessed by the controller for further usage.
In this case that date is just displayed on the next line.
Select a date from the datepicker:
Selected date: {{user.aDate | date:'MM-dd-yyyy'}}

This is another example of the use of a custom directive.
Now for jQuery UI's slider. Again the two way binding is used,
so when the slider is moved or the number is changed,
they follow each other. That is a bit more complicated here,
since jQuery expects a div segment to be used for the slider
and not an input segment, like for the datepicker above.
For the dial gauge the angular-dialgauge directive is used.

Email (with some basic address validation)

   Send

{{myForm.invalid}} {{myForm.snd_msg}}

The counter below is apparently nothing special, but how easy it is to code is.
No input segment is used for it.

{{myForm.second_digit}} {{myForm.first_digit}}   increment   decrement

Below are two lists. In this case the left one is the main list, that could
for instance be filled from a database. Items can be added to it manually as well.
The right one is meant here as a sub-list, that is filled by moving/copying to it
items from the main list. An action on an item in a list is activated by clicking on it.
The advantage of this solution is that the number of possible actions can easily
be extended.

For comparison you find below a small application implementing a custom directive.
Both are copied from the following website: http://www.directiv.es/Angular-DragDrop.
Elements of the two lists can be moved from one list to the other by dragging and dropping.

For the demo below the angular-tree-control component is used.
A tree could for instance be used to select a recipient for an email message to be send,
without needing/revealing the actual email address. Like shown here.
The component had already a sort mechanism. To make that work on subsets instead of
the complete tree, I simply added a key 'sort'. As a result only person's names are sorted. {{node.name}}

This demo uses the external Firebase service. Just type in some text and it gets stored on the
Firebase host and echoed. Note how fast it is!

You wrote: {{firebase.text }}

With AngularJS it is very easy to use templates. No need to use id-s.
Depending on the user, determined with a login or some another mechanism,
the webpage can be personalized. For this demo you input your name and
select a (very short) template manually.

{{template.name}}

For this simple demo the google-map directive from
'Google Maps for AngularJs' is used.

When you click on the button below, you will see your coordinates and your
location becomes the new center of the map (your browser will ask your permission).
Get your location
Latitude: {{geo.latitude}}
Longitude: {{geo.longitude}}

This simple demo uses a custom directive for countUp.js.
The directive has an add, an auto and a delay attribute, to enable its use in various scenarios.
Here the add and auto attributes can be changed. With add checked the new value will added
to the existing value. Else the existing value will be replaced with the new one.
When auto attribute is checked then the value will be updated automatically.
As soon as the user starts changing the input value, a timer starts and when the value of the
delay is reached, the counter value is updated. For this demo the delay is set to 2 seconds.
The delay is necessary to give the user time to type in the new number completely
(ng-change responds immediately). When auto is not selected then a trigger can be used.
Here that is mouseleave as an example.
   Add Auto

Here the add and auto attributes cannot be changed. They are initially (un)selected in the
view and can be changed in the controller.
  

Is this web page useful to you?   {{option}}       That is great! We are very pleased to hear that. We are sorry to hear that.