AngularJS/CSS Move one div out and another in on the same modal

I am working on an app and want to use AngularJs for doing this :-

<div class="main">
<div class="one">Content 1 here ...</div>
<div class="two">Content 2 here ...</div>
</div>

div one contains a button which on click brings out div two and replaces div one.

Can anyone help regarding this, (Do i need to use ng-Animate or a better CSS trick) ?

EDIT: I will make it a little more clear Div one has a list and a button called ADD which on click brings a list which is in div two, I select what to add and then submit, the list in div one appears updated.

Try this JS FIDDLE

HTML

<div ng-app="myApp">
<div ng-controller="listCtrl">
    <div class="one">
        <ul>
            <li ng-repeat="list in lists">{{list}}</li>
        </ul>
        <button ng-click="showOptions = !showOptions">{{showOptions?'Hide':'Show'}} Options</button>
    </div>
     <div class="two" ng-show="showOptions">
        <ul>
            <li ng-repeat="list in options" ng-click="add($index)">{{list}}</li>
        </ul>
    </div>
</div>

Controller

    var myApp = angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){

    $scope.lists =['Monday','Tuesday'];

    $scope.options =['Sunday','Saturday'];

    $scope.add = function(index){

        $scope.lists.push($scope.options[index]);
         $scope.options.splice(index,1);


    };

});