Our application is looking good, but

there are a couple of things missing before it's complete.

First of all,

the save functionality is limited to the TODO where the Save button is clicked.

For instance, if I click Save here, it will only save this TODO.

A better behavior would be to save all TODOs that have been edited

whenever the save button is clicked.

So for instance, if I click this save button,

even if I have edited TODOs down here, all of them will be saved.

Second, the edit button is a bit of a UI flaw.

As a user whenever you are working with a modern web application you expect

to be able to edit the application without explicitly telling it that you want to.

So in our app I have to click edit if I want to edit a to do.

What should happen is that I'm able to click the to do and start editing.

So let's fix our save functionality first.

First, I'm going into our data service.

Then I'm going to change saveTodo to saveTodos.

Now, on the controller I'll also change the name of the function.

Just to be more semantically correct.

My new save function is not going to take any parameters.

Instead, I'm going to filter the scope.Todos for

all Todos that have been edited.

Remember that scope.todos is an array of objects.

This means that I can use the array's filter method.

And this will just filter the array into a new array.

The filter method takes a callback function.

And this function will take a parameter

that will be the name of the current element in the array inside of a callback.

We can name it anything, but in an iterater, typically the singular form

of the variable that you're iterating over is a good convention to go by.

And here we'll say if to-do has

been edited, And return it.

We can call this new set of todos filtered

Todos And

that's what we'll pass to our saveTodos function in our service.

We'll just check that this works.

Refresh the page.

Open my console.

We'll edit.

Couple of these Todos.

Now, we'll click save Todos.

Looks like it's not working.

That's because we forgot to update our template with our new function name

in the controller and that save Todos, and I'll refresh the page.

Edit a couple of TODOs.

Now I can see it's working.

But of course, I need to change the parameters in the service.

We'll change this to be a little more accurate.

Refresh the page again.

There we go.

We see the number of todos that have been changed.

Great.

One thing is missing.

If I check a TODO as completed, or

if I uncheck a TODO as incomplete, they don't get saved.

You can see that there's still the same number of todos being saved.

To solve this we're going to use the exact same expression

we used on the ng change directive on our text input.

Only now we're going to use this On the ng-click directive,

In the span element.

Since we already have one expression,

where we add another expression is with a semicolon.

We'll say todo.edited is true.

Refresh the page.

I have 1, 2, 3 to do's, save those, 3 to do's have been saved.

4, 5, save those, 5 to do's have been saved.

I want to point out that typically we could use the ng-change directive

on the check box input just like we did on the text input.

However, remember that we have a custom input directive, and since the CSS style

is set to display=none, Angular won't pick up the changes to the check box input.

Good thing it's just as easy for

us to use the ng-click directive on the span element.

Finally, let's make the user experience around editing a little more intuitive.

And we can do this by adding

the ng-click directive to the label element.

And we'll say ng-clikc="editing = true".

Save that.

Refresh the page.

Now when I click on the label, the input opens up.

So of course now we can get rid of the editing button.

And our UI is just that much more sleek and that much more intuitive.

Great job in this course.

You now have the confidence to dissect smaller angular projects with little or

no guidance.

You may want to go back over some of the content in this course before you feel

comfortable setting up your own Angular application.

So don't feel like you should have Angular mastered just yet.

Other Treehouse content will help you master Angular and

make you feel more comfortable with large applications.

For now, take pride in what you've accomplished in this course.

Great work!