My goal is to utilize an isolated scope in order to access the hideButtons property within the directives named todo-cardui and todo-formui:

 app.directive("todoFormui",function(TodoService){
    var dirDefObj = {
        restrict:'E',
        templateUrl:'app/templates/edit-todo.html',
        scope:{
            hideButtons:"=hideButtons",
            todo:"=todo"
        },
        controller:function($scope){
            $scope.hideButtons = $scope.$parent.uiState.hideButtons;
            //add a separate model for editor and actions
            console.log($scope.hideButtons);
            $scope.model = {
                todo:$scope.todo
            };
            $scope.uiState = {
                editMode:true,
                btnText:'Done'
            };
            $scope.actions = {};
            $scope.actions.preview = function(){
                console.log("Inside the edit to preview function");
                $scope.uiState.editMode = false;
            };

            $scope.actions.save = function(){
                TodoService.edit($scope.model.todo);
            };

            $scope.actions.discard = function(){
                $scope.model.todo={
                    task:'',
                    description:'',
                    done:''
                };
                $scope.todo = $scope.savedState;
            };
        },
        replace:true
    };
    return dirDefObj;
});

app.directive('todoCardui',function(TodoService){
    var dirDefObj = {
        restrict:'E',
        templateUrl:'app/templates/display-todo.html',
        scope:{
            "hideButtons":"=hideButtons",
            todo:"=todo"
        },
        replace:true,
        controller:function($scope)
        {   console.log($scope);
            $scope.model = {
                todo:$scope.todo
            };
            $scope.uiState = {
                editMode:false,
                btnText:'Done'
            };
            $scope.actions = {};
            $scope.actions.clickDone = function clickDone(){
                //two tasks (1)toggle the done value on the todo (2) toggle the btnText on the todo
                $scope.model.todo.done = !$scope.model.todo.done;
                $scope.uiState.btnText = $scope.todo.done?'Reinstate':'Done';
            };

            $scope.actions.remove = function remove()
            {
                TodoService.delete($scope.model.todo);
                $scope.$emit('todo:deleted',$scope.model.todo);
            };

            $scope.actions.edit = function edit(value)
            {
                $scope.uiState.editMode = true;
                console.log($scope.uiState.editMode);
            };
        }
    };
    return dirDefObj;
});

Their parent directive is called create-modal and it has the following structure:

app.directive('modalCreate',['$log','TodoService',function($log,TodoService)       {
var dirDefObj = {
    restrict:'E',
    scope:{},
    templateUrl:'app/templates/create-todo.html',
    controller:function($scope,TodoService)
    {
        $scope.model = {};
        $scope.actions = {};
        $scope.uiState = {};
        $scope.model.todo ={
            task:'What do you want to do?',
            description:'Lorem Ipsum Dolar...screw it'
        };
        $scope.uiState.hideButtons = true;
        $scope.actions.show_modal=function show_modal()
        {
            if(!$('.create-modal').modal('is active'))
                $('.create-modal').modal('show');
        };

        $scope.actions.saveTodo = function saveTodo(){
            TodoService.save($scope.todo);
            $('.create-modal').modal('hide');
        };

        $scope.actions.cancel = function cancel(){
            $log.info("Cancel the todo action,currently a no-op");
            $('.create-modal').modal('hide');
        };
    },
    replace:true
};

return dirDefObj;

}]);

I implement the code as follows:

 <div class="ui segment">
<button class="ui button" ng-click="actions.show_modal()">Create Todo</button>
<div class="ui modal create-modal">
    <i class="ui icon close" ng-click="cancel()"></i>
    <div class="header">Create Todo</div>
    <div class="content">
        <todo-formui hideButtons="uiState.hideButtons" todo="model.todo"></todo-formui>
        <div class="ui vertical divider">
            <span class="ui teal circular label">Is</span>
        </div>
        <div class="preview">
            <todo-cardui hideButtons="uiState.hideButtons" todo="model.todo"></todo-cardui>
        </div>
    </div>
    <div class="actions">
        <button type="button" class="ui button green save-button" ng-click="actions.saveTodo()">Save</button>
        <button type="button" class="ui button red delete-button" ng-click="actions.cancel()">Cancel</button>
    </div>
</div>

Even though the todo property gets picked up successfully, the hideButtons one does not. I've attempted to:

$scope.hideButtons = $scope.$parent.uiState.hideButtons;

But this gives me the error:

Error: [$compile:nonassign] Expression 'undefined' used with directive 
'todoFormui' is non-assignable!
http://errors.angularjs.org/1.3.15/$compile/nonassign?p0=undefined&p1=todoFormui
    at REGEX_STRING_REGEXP (angular.js:66)
    at $get.parentSet (angular.js:7703)
    at parentValueWatch (angular.js:7716)
    at Object.regularInterceptedExpression (angular.js:12914)
    at Scope.$get.Scope.$digest (angular.js:14303)
    at Scope.$get.Scope.$apply (angular.js:14574)
    at done (angular.js:9701)
    at completeRequest (angular.js:9891)
    at XMLHttpRequest.requestLoaded (angular.js:9832)